vue学习笔记（16）——天气案例

最新推荐文章于 2024-07-09 11:18:19 发布

weixin_54763080

最新推荐文章于 2024-07-09 11:18:19 发布

阅读量203

点赞数

分类专栏： vue学习笔记文章标签：学习 vue.js Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_54763080/article/details/128837718

版权

vue学习笔记专栏收录该内容

19 篇文章 1 订阅

订阅专栏

该代码示例展示了一个使用Vue.js创建的简单应用，它显示了基于数据属性`ishot`的天气状况（热或凉），并提供了两个按钮来切换天气状态。`info`是计算属性，依赖于`ishot`的状态。用户点击按钮时，`ishot`的值会反转，从而更新显示的天气信息。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>天气案例</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
  
</head>
<body>
<!-- 准备一个容器 -->
<div id="root">
 <h2>今天天气很{{info}}</h2>
 <!-- 绑定事件的时候:@xxx:"yyy" yyy可以写一些简单的语句 -->
  <button @click="ishot=!ishot">切换天气</button>
 <button @click="changeweather">切换天气</button>
</div>
 
<script type="text/javascript">
Vue.config.productionTip=false


new Vue({
    el:'#root',
    data:{
        ishot:true
    },
    computed:{
        info(){
            return this.ishot?'hot':'cool'
        }
    },
    methods:{
        changeweather(){
            this.ishot=!this.ishot
        }
    }
})
 
</script>
</body>
</html>