天气案例(js向vue过度小案例)

最新推荐文章于 2022-02-22 19:30:15 发布

IT_CODE.

最新推荐文章于 2022-02-22 19:30:15 发布

阅读量256

点赞数

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

本文链接：https://blog.csdn.net/qq_54250695/article/details/122028889

版权

Vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

看bilibili的vue视频中各博主基本都会有vue天气这样一个案例，接下来我们来学习一下

咋先看看js是如何实现的，比对学习一下，更好的理解vue的思想,把js编写思想扭转过来.

<body>

    <h1>今天天气针不错,好<p id="c">凉爽</p>
    </h1><br />

    <button id="btn">点击切换天气</button>
    <script>
        //获取元素  dom获取元素
        var btn = document.getElementById('btn');
        var c = document.getElementById("c");

        btn.onclick = function () {
            if (c.innerHTML == "凉爽") {
                c.innerHTML = "炎热";
            } else {
                c.innerHTML = "凉爽";
            }
        }
    </script>
</body>

js命令式编程,首先都要获取dom对象,在对dom对象进行值的修改等

<body>
    <div id="root">
    <!--为简化插值语法中的计算，用到计算属性--> 
    <!--<h3>今天天气很{{isHot ?'炎热' :'寒冷' }}</h3> -->
    <!--<h3>今天天气很{{info}}</h3>--> <!--把isHot?:'炎热'?'寒冷'交给info维护计算-->
       <button @click="changeWeather()">改变天气</button>
    </div>
    <script>
        new Vue({
            el:'#root',
            data:{
                isHot:true,
                
            },
            computed: {   //计算属性
                info(){
                      return this.isHot ? '炎热'  :'寒冷' //3元运算符
                }
            },
            methods: {                                  //点击事件交个methods处理
                changeWeather(){
                   this.isHot=!this.isHot              //点击一下就取反
                }
            },
          
        })
    </script>
</body>

咋再来看看vue是如何实现的 Vue是首先把值和js对象进行绑定，再修改js对象的值，vue框架就会自动把dom的值进行修改

IT_CODE.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
天气案例(js向vue过度小案例)

看bilibili的vue视频中各博主基本都会有vue天气这样一个案例，接下来我们来学习一下咋先看看js是如何实现的，比对学习一下，更好的理解vue的思想,把js编写思想扭转过来.<body> <h1>今天天气针不错,好<p id="c">凉爽</p> </h1><br /> <button id="btn">点击切换天气</button> <scrip.
复制链接

扫一扫

专栏目录