计算属性和监视
1. 效果 (03_ 计 算 属 性 和 监 视 /test.html)
2. 计算属性
1) 在 computed 属性对象中定义计算属性的方法 2) 在页面中使用{{方法名}}来显示计算的结果
3. 监视属性
1) 通过通过 vm 对象的$watch()或 watch 配置来监视指定的属性 2) 当属性变化时, 回调函数自动调用, 在函数内部进行计算
4. 计算属性高级
1) 通过 getter/setter 实现对属性数据的显示和监视 2) 计算属性存在缓存, 多次读取只执行一次 getter 计算
5. 编码
<div id=”demo”> 姓: <input type=”text” placeholder=”First Name” v-model=”firstName”><br> 名: <input type=”text” placeholder=”Last Name” v-model=”lastName”><br> 姓名 1(单向): <input type=”text” placeholder=”Full Name” v-model=”fullName1″><br> 姓名 2(单向): <input type=”text” placeholder=”Full Name” v-model=”fullName2″><br> 姓名 3(双向): <input type=”text” placeholder=”Full Name2″ v-model=”fullName3″><br> </div>
<script type=”text/javascript” src=”../js/vue.js”></script> <script type=”text/javascript”> var vm = new Vue({ el: ‘#demo’, data: { firstName: ‘Kobe’, lastName: ‘bryant’, fullName2: ‘Kobe bryant’ },
computed: {
fullName: function () { return this.firstName + ” ” + this.lastName },
fullName3: { get: function () { return this.firstName + ” ” + this.lastName }, set: function (value) { var names = value.split(‘ ‘) this.firstName = names[0] this.lastName = names[1] } } },
watch: { lastName: function (newVal, oldVal) { this.fullName2 = this.firstName + ‘ ‘ + newVal } } })
vm.$watch(‘firstName’, function (val) { this.fullName2 = val + ‘ ‘ + this.lastName })
想要了解跟多关于前端培训课程内容欢迎关注尚硅谷前端培训，尚硅谷除了这些技术文章外还有免费的高质量前端培训课程视频供广大学员下载学习
上一篇: 大数据培训Hadoo之HDFS组成架构
下一篇: 培训了前端不会做怎么办
