VUE计算属性关键词: computed

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>计算列属性</title><script src="js/vue.min.js"></script></head><body><div id="app"><p>原始字符串:{{message}}</p><p>计算后反转字符串:{{reversedMsg}}</p><p>使用methods的反转字符串：{{reversedMsg2()}}</p></div><script>new Vue({el:'#app',data:{message:'www.csdn.net'},computed:{//计算属性的getterreversedMsg:function(){//this:指向new Vue()的实例;return this.message.split('').reverse().join('')}},methods:{reversedMsg2:function(){return this.message.split('').reverse().join('')}}})</script></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>computed setter</title><script src="js/vue.min.js"></script></head><body><div id="app"><p>{{site}}</p></div><script>var vm=new Vue({el:'#app',data:{name:'Google',url:'http://www.51cto.com'},computed:{site:{//getterget:function(){return this.name+''+this.url},//setterset:function(newValue){var names=newValue.split(' ')this.name=names[0]this.url=names[names.length-1]}}}})//调用setter,vm.name和vm.url也会被对应更新;//vm.site='程序员俱乐部：http://www.csdn.net';console.log('name:'+vm.name);console.log('<br/>');console.log('url:'+vm.url);</script></body>
</html>

当更改vm的site属性的时候，则属性更改下：

VUE计算属性关键词: computed相关推荐

Vue计算属性（computed）和侦听器（watch）
Vue计算属性(computed)和侦听器(watch) 计算属性(computed) 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.所以不 ...
vue计算属性：computed示例
vue计算属性computed与监听属性watch的基本使用
目录 Vue.js 计算属性 Vue.js 监听属性 Vue.js 计算属性计算属性关键词: computed. 计算属性在处理一些复杂逻辑时是很有用的. 反转字符串的示例 <!DOCTYPE ...
vue教程2-03 vue计算属性的使用 computed
vue教程2-03 vue计算属性的使用 computed computed:{b:function(){ //默认调用getreturn 值}}--------------------------c ...
Vue 计算属性 computed
<!--计算属性:1. 定义:要用的属性不存在,要通过已有的属性计算得来2. 原理:底层借助了 Object.defineProperty 方法提供的 getter 和 setter3. get ...
Vue计算属性- computed:{}
七. Vue计算属性计算属性的重点突出在属性两个字上(属性是名词),首先它是个属性其次这个属性有计算的能力(计算是动词),这里的计算就是个函数;简单点说,它就是一个能够将计算结果缓存起来的属性(将行 ...
Vue计算属性和监听属性
一.计算属性计算属性关键词: computed.计算属性在处理一些复杂逻辑时是很有用的. 可以看下以下反转字符串的例子: <div id="app">{{ messa ...
5.Vue 计算属性和侦听器
Hello,我是 Alex 007,一个热爱计算机编程和硬件设计的小白,为啥是007呢?因为叫 Alex 的人太多了,再加上每天007的生活,Alex 007就诞生了. 5.Vue 计算属性和侦听器 ...
Vue计算属性、方法、侦听器
文章目录一.基础计算模板二.计算属性computed 三.方法methods 四.侦听器watch 五.总结六.源码地址一.基础计算模板 <!DOCTYPE html> <h ...

VUE计算属性关键词: computed

VUE计算属性关键词: computed相关推荐

最新文章

热门文章