vue中的计算属性
1、什么是计算属性
- 如果模板中的表达式存在过多的逻辑,那么模板会变得臃肿不堪,维护起来也异常困难,因此为了简化逻辑出现了计算属性;
<template> <div id="example"> <p>{{message.split(" ").reverse().join('!')}}</p> </div> </template> <script> export default { name: "example", data() { return { message : 'i am chinese person' }; }, methods : { }, mounted(){ } }; </script>
上述表达式比较繁琐,因此我们采用计算属性实现
- 特点:在一个计算属性里可以完成各种复杂的逻辑,包括运算、函数调用等,只要最终返回一个结果就可以;
<template> <div id="example"> <p>源数据:{{message}}</p> <p>更改后的数据:{{changeMessage}}</p> </div> </template> <script> export default { name: "example", data() { return { message : 'i am chinese person' }; }, computed : { //getter方法 changeMessage : function(){//无需进行声明 return this.message.split(" ").reverse().join('!') } } }; </script>
- 计算属性拥有的两个方法:getter setter 用来实现数据的双向绑定
<template> <div id="example"> <p>给定以下三个词语组成一句话</p> <span>{{combine}}</span> <span>{{mom}}</span> <span>{{dad}}</span> <p style="padding:12px 0">答案为:{{result}}</p> <button @click="btn">改变语句</button> </div> </template> <script> export default { name: "example", data() { return { mom: "妈妈", dad: "爸爸", combine: "组成了一个家" }; }, computed: { result : {//与不写get set方法的形式有区别 //一个计算属性的getter get : function(){//三个值变化的时候,result的值会自动更新,也会自动更新DOM结构 return this.mom + this.dad + this.combine }, // 一个计算属性的setter set : function(newVal){//当设置result的时候,其他的值也会相应的发生改变 this.mom = newVal.substr(0,2); this.dad = newVal.substr(2,2); this.combine = newVal.substr(4) } } }, methods : { btn(){ this.result = "医生警察为人民服务" } } }; </script>
故乡明