Vue天气案例

最新推荐文章于 2024-09-06 22:20:29 发布

林代码er

最新推荐文章于 2024-09-06 22:20:29 发布

阅读量294

点赞数

分类专栏： linerVue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_71088505/article/details/131487166

版权

linerVue 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

绑定事件的时候：@xxx="yyy" yyy可以写一些简单的语句。

<body>
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWether">切换天气</button>
    </div>
</body>
    <script>
        new Vue({
            el:'#root',
            data: {
                isHost: true
            },
            computed:{
                info(){
                    return this.isHost ? "炎热" : "凉爽"
                }
            },
            methods:{
                changeWether(){
                    this.isHost = !this.isHost   //直接取反
                    //if判断
                    // if (this.isHost==true){
                    //     this.isHost = false
                    // }else {
                    //     this.isHost = true
                    // }
                }
            }
        })
    </script>