vue计算属性
Computed:计算属性 其中有getter / setter方法，只是意义上的getter/setter，常用getter方法
相比较methods区别在于：
computed在缓存空间，对于一个逻辑复杂但是又变动小的计算模块，建议使用computed.
Method对于执行的模块，没有缓存。调用n次计算n次。
//反转效果
<div id="app"> <p>原始属性：{{name}}</p> <p>{}里反转：{{name.split('').reverse().join('')}}</p> <p>function反转：{{nameReverse()}}</p> <!----> <p>属性计算反转：{{nameOver}}</p> </div> <script src="js/vue.js"></script> <script> new Vue({ el:'#app', data:{ name:'Rose Jack' }, methods:{ nameReverse(){ return this.name.split('').reverse().join(''); } }, computed:{//computed取名千万别和Method取名一样 return this.name.split('').reverse().join(''); } } }); </script> |
Getter/Setter
反转效果
<body> <div id="app"> <p>原始属性：{{name}}</p> <p>{}里反转：{{name.split('').reverse().join('')}}</p> <p>function反转：{{nameReverse()}}</p> <!----> <p>属性计算反转：{{nameOver}}</p>
<p>{{firstName+lastName}} </p> <p>{{fullName}}</p> <button @click="update()">update</button> //点击update后fullName = 'haungfeihong' </div> <script src="js/vue.js"></script> <script> new Vue({ el:'#app', data:{ name:'Rose Jack', firstName:'zhang', lastName:'sanfeng' }, methods:{ nameReverse(){ return this.name.split('').reverse().join(''); }, update(){ this.fullName = "huang feihong";//带参为setter } }, computed:{//computed取名千万别和Method取名一样 nameOver(){ return this.name.split('').reverse().join(''); },
fullName:{ get(){ return this.firstName + this.lastName ; }, set(str){ this.firstName = str.split(" ")[0]; this.lastName = str.split(" ")[1]; } } } }) </script> </body> |
