Vue-计算属性computed
2019-05-14 15:27
399 查看
index.html
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://unpkg.com/vue"></script> <link rel="stylesheet" href="style.css"> </head> <body> <!--vue-app是根容器--> <div id="vue-app"> <h1>Computed 计算属性</h1> <button v-on:click="a++">Add to A</button> <button v-on:click="b++">Add to B</button> <p>A-{{a}}</p> <p>B-{{b}}</p> <p>Age + A ={{addToA}}</p> <p>Age + B ={{addToB}}</p> </div> <script src="app.js"></script> </body> </html>
app.js
new Vue({ el:"#vue-app", data:{ a:0, b:0, age:20 }, methods:{ // addToA:function () { // return this.a+this.age // }, // addToB:function () { // return this.b+this.age // } }, //如果使用methods的话执行一个所有的都会执行 computed:{ addToA:function () { return this.a+this.age }, addToB:function () { return this.b+this.age } } });
相关文章推荐
- Vue的computed计算属性是如何实现的?源码分析
- Vue.js学习 Item5 -- 计算属性computed与$watch
- vue教程2-03 vue计算属性的使用 computed
- Vue.js第三天学习笔记(计算属性computed)
- VUE学习之计算属性computed
- vue计算属性computed的使用方法示例
- Vue计算属性computed:{}和侦听器watch:{}
- vue.js计算属性(computed)
- Vue学习笔记3.5 计算属性computed中的 get方法和set方法
- vue学习笔记: 8.计算属性-----computed
- vue 利用 计算属性computed 实现轮播图 上一页 和下一页功能
- vue的computed计算属性学习
- vue.js计算属性computed用法实例分析
- vue:计算属性(computed)
- Vue的计算属性computed
- Vue 的computed(计算属性)
- Vue:计算属性computed
- vue计算属性computed
- 谈一谈对Vue计算属性computed的初步认识,及用法心得。
- vue的 计算属性(computed)、methods、watched三者区别