vue-学习笔记2
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue-学习笔记2相关的知识,希望对你有一定的参考价值。
1、计算属性
对于较复杂的逻辑可以使用计算属性
<div id=‘box‘> <p> <label for="name">名字</label> <input type="text" id="name" v-model="name"> </p> <p> <label for="age">年龄</label> <input type="text" id="age" v-model="age"> </p> <p>{{intro}}</p> </div> var vm = new Vue({ el:"#box", data:{ age:‘‘, name:‘‘ }, computed:{ intro:function(){ if(this.age && this.name) return ‘你的名字是‘+this.name+‘,今年是‘+this.age+‘岁~‘ } } });
计算属性intro,依赖着age和name,当两个中的任何一个值发生改变,都会导致intro中文字变化。
计算属性 VS 方法
使用方法也能实现,只是计算属性是基于它的依赖进行缓存的。只有它的相关依赖发生改变时才会重新求值。
计算属性 VS watch属性
vue提供一种更通用的方式来观察和响应vue实例上的数据变动 , watch选项,来相应数据的变化。主要用于在数据变化响应时,执行异步操作或开销较大的操作
以上是关于vue-学习笔记2的主要内容,如果未能解决你的问题,请参考以下文章