Vue第五课数据监听watch计算属性computed

最新推荐文章于 2024-01-23 14:16:43 发布

qq_43538170

最新推荐文章于 2024-01-23 14:16:43 发布

阅读量95

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_43538170/article/details/112342950

版权

简介：讲述数据的单个监听以及多个监听还有深度监听的不同

A.watch监听单个，computed监听多个

思考业务场景： 1. 类似淘宝，当我输入某个人名字时，我想触发某个效果 2.利用vue做一个简单的计算器

B.当watch监听的是复杂数据类型的时候需要做深度监听

C. computed 监视对象,写在了函数内部, 凡是函数内部有this.相关属性,改变都会触发当前函数

例示代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据监听watch计算属性computed</title>
</head>
<body>
    <div id="app">
        <div>watch监听数据</div>
        <input type="text" name="" v-model="msg.text">
        <div>computed计算属性</div>
        <input type="text" name="" v-model='n1'>+
        <input type="text" name="" v-model='n2'>*
        <input type="text" name="" v-model='n3'>={{result}}
    </div>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript">
        new Vue({
          el:'#app',
          //data都含有一个输出return
          data(){
              return{
                //简单数据
                //msg:''
                //复杂数据，该数据是一个对象
                msg:{text:''},
                n1:'',
                n2:'',
                n3:'1'
              }
          },
          computed:{
              result(){
                  //将n1，n2，n3转换成数据类型
                  return ((Number(this.n1)+Number(this.n2))*Number(this.n3))
              }
          },
          watch:{
              //简单监听
              //监听简单的数据类型
              //newval表示的是新数据，oldval表示的是旧数据
              //msg(newval,oldval){
                  //当输入框输入的love时跳出弹框
                  //if(newval=='love'){
                      //alert(newval)
                  //}
                  //console.log(newval,oldval)

                  //复杂监听
                msg:{
                    handler(newval,oldval){
                        if(newval.text=='love'){
                            alert(newval.text)
                        }
                    },
                    deep:true
                  }
              }
          
        })
    </script>
</body>
</html>

qq_43538170

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue第五课数据监听watch计算属性computed

简介：讲述数据的单个监听以及多个监听还有深度监听的不同A.watch监听单个，computed监听多个思考业务场景： 1. 类似淘宝，当我输入某个人名字时，我想触发某个效果 2.利用vue做一个简单的计算器B.当watch监听的是复杂数据类型的时候需要做深度监听C. computed 监视对象,写在了函数内部, 凡是函数内部有this.相关属性,改变都会触发当前函数例示代码如下：<!DOCTYPE html><html lang="en"><hea
复制链接

扫一扫