铁雪资源网 Design By www.gsvan.com
computed
计算属性:通过属性计算得来的属性
计算属性,是在相关联的属性发生变化才计算,计算过一次,如果相关属性没有变化,下一次就不需要计算了,直接去缓存的值
a:<input type="number" v-model.number="a" /> b:<input type="number" v-model.number="b" /> <!--c:<input type="number" v-model.number="c" />--> 总和:{{sum()}} 总和:{{count}} 平均值:{{avg}} <p v-once>单价:{{price}}</p> <p>数量:<input type="number" v-model.number="count"/></p> <p>总价:{{sum}}</p> <p>运费:{{free}}</p> <p>应付:{{pay}}</p> data: { a: '', b:'', c:'', price: 28.8, count: '', free: 10 }, computed: { count(){ console.log('计算属性触发了'); return this.a+this.b; }, avg(){ return this.count/2; }, sum(){ return this.price * this.count; }, pay(){ if(this.count>0){ if(this.sum>=299){ return this.sum; }else{ return this.sum + this.free; } }else{ return 0; } } }
watch
属性变化,就会触发监听的函数。
监听属性变化,一般是用于跟数据无关的业务逻辑操作。
计算属性,适用于属性发生变化后,需要计算得到新的数据。
<div id="app"> a: <input type="number" v-model.number="a" /><br /> b: <input type="number" v-model.number="b" /><br /> 总和:{{count}} <br /><br /><br /> name: <input type="text" v-model="obj.name" /><br /> age: <input type="text" v-model.number="obj.age" /><br /> </div> <script src="/UploadFiles/2021-04-02/vue.js">watch 也可以在methods里面进行监听配置
<div id="app"> a: <input type="number" v-model.number="a" /><br /> b: <input type="number" v-model.number="b" /><br /> 总和:{{count}} <br /><br /><br /> name: <input type="text" v-model="obj.name" /><br /> age: <input type="text" v-model.number="obj.age" /><br /> <button @click="btnAction()">开始监听</button> </div> <script src="/UploadFiles/2021-04-02/vue.js">下面在看下computed 和 watch
"htmlcode">
/*html: 我们要实现 第三个表单的值 是第一个和第二个的拼接,并且在前俩表单数值变化时,第三个表单数值也在变化 */ <div id="myDiv"> <input type="text" v-model="firstName"> <input type="text" v-model="lastName"> <input type="text" v-model="fullName"> </div> <!--js: 用watch方法来实现--> //将需要watch的属性定义在watch中,当属性变化氏就会动态的执行watch中的操作,并动态的可以更新到dom中 new Vue({ el: '#myDiv', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName }, lastName: function (val) { this.fullName = this.firstName + ' ' + val } } }) <!--js: 利用computed 来写--> //计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。 //这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。 new Vue({ el:"#myDiv", data:{ firstName:"Den", lastName:"wang", }, computed:{ fullName:function(){ return this.firstName + " " +this.lastName; } } })"color: #ff0000">总结
以上所述是小编给大家介绍的Vue中的 computed 和 watch,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com
暂无深入浅析Vue中的 computed 和 watch的评论...