一、计算属性

  计算属性关键词: computed。计算属性在处理一些复杂逻辑时是很有用的。

  可以看下以下反转字符串的例子:

<div id="app">
{{ message.split('').reverse().join('') }}
</div>
//模板变的很复杂起来,也不容易看懂理解

  使用了计算属性的实例:

<div id="app">
<p>原始字符串: {{ message }}</p>
<p>计算后反转字符串: {{ reversedMessage }}</p>
</div> <script>
var vm = new Vue({
el: '#app',
data: {
message: 'Runoob!'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
</script>

  实例中声明了一个计算属性 reversedMessage 。提供的函数将用作属性 vm.reversedMessage 的 getter 。vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时,vm.reversedMessage 也会更新。

1、computed vs methods

  我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。

methods: {
reversedMessage2: function () {
return this.message.split('').reverse().join('')
}
} {{reversedMessage2()}}

  可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。

  此外,computed 对象内的方法如果在初始化时绑定到元素上的事件会先执行一次这个方法 ,而 methods 内的方法则不会。

2、computed setter

  computed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter :

<div id="app">
<p>{{ site }}</p>
</div> <script>
var vm = new Vue({
el: '#app',
data: {
name: 'Google',
url: 'http://www.google.com'
},
computed: {
site: {
// getter
get: function () {
return this.name + ' ' + this.url
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.name = names[]
this.url = names[names.length - ]
}
}
}
})
// 调用 setter, vm.name 和 vm.url 也会被对应更新
vm.site = '测试计算属性 setter';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);
</script>

  结果显示的就不是默认的name和url值,而不是 vm.site 的 setter 的值。

  setter 会被调用, vm.name 和 vm.url 也会被对应更新。

二、监听属性

  监听属性 watch,我们可以通过 watch 来响应数据的变化。

<div id = "computed_props">
千米 : <input type = "text" v-model = "kilometers">
米 : <input type = "text" v-model = "meters">
</div>
<p id="info"></p>
<script type = "text/javascript">
var vm = new Vue({
el: '#computed_props',
data: {
kilometers : ,
meters:
},
methods: {
},
computed :{
},
watch : {
kilometers:function(val) {
this.kilometers = val;
this.meters = val * ;
},
meters : function (val) {
this.kilometers = val/ ;
this.meters = val;
}
}
});
// $watch 是一个实例方法
vm.$watch('kilometers', function (newValue, oldValue) {
// 这个回调将在 vm.kilometers 改变后调用
document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + ",修改后值为: " + newValue;
})
</script>

  以上代码中我们创建了两个输入框,data 属性中, kilometers 和 meters 初始值都为 0。

  watch 对象创建了两个方法 kilometers 和 meters。

  当我们再输入框输入数据时,watch 会实时监听数据变化并改变自身的值。

Vue计算属性和监听属性的更多相关文章

  1. vue(4)—— vue的过滤器,监听属性,生命周期函数,获取DOM元素

    过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...

  2. Vue-指令补充、过滤器、计数器属性、监听属性

    vue实例成员: el | template |data | methods watch 监听事件| computed 计数属性使用 | filters过滤器 | props 父传子 componen ...

  3. 09.1.VUE学习之watch监听属性变化实现类百度搜索栏功能ajax异步请求数据,返回数组

    09.1html里 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  4. 09.VUE学习之watch监听属性变化实现类百度搜索栏功能ajax异步请求数据,返回字符串

    cmd下安装axios npm install axios 安装好后,会多出node_modules文件夹 思路: 监听data里的word改变时,发送ajax异步请求数据, 把返回的数据赋值给dat ...

  5. Vue ---- 表单指令 条件指令 循环指令 分隔符 过滤器 计算属性 监听属性

    目录 案例讲解: 一. 表单指令 1.重点: 补充 2.单选框 3.单一复选框 4.多复选框 二 . 条件指令 v-if/v-show ... v-clock 三 . 循环指令 string arra ...

  6. vue中的computed(计算属性)和watch(监听属性)的特点,以及深度监听

    //计算属性是根据data中已有的属性,计算得到一个新的属性, <div>全名:{{fullName}}</div> 创建计算属性通过computed关键字,它是一个对象 计算 ...

  7. Vue (表单、斗篷、条件、循环指令,分隔符成员、计算属性成员、属性的监听、vue组件、子组件、各个常见的钩子函数)

    表单指令 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF- ...

  8. vue条件语句、循环语句、计算属性、侦听器监听属性

    因为 v-if 和v-for是一个指令,所以必须将它添加到一个元素上.但是如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v-if.最终 ...

  9. 浅谈vue中的计算属性和侦听属性

    计算属性 计算属性用于处理复杂的业务逻辑 计算属性具有依赖性,计算属性依赖 data中的初始值,只有当初始值改变的时候,计算属性才会再次计算 计算属性一般书写为一个函数,返回了一个值,这个值具有依赖性 ...

随机推荐

  1. [AtCoder ARC093F]Dark Horse

    题目大意:有$2^n$个人,每相邻的两个人比赛一次.令两个人的编号为$a,b(a\leqslant b)$,若$a\neq 1$,则$a$的人获胜:否则若$b\in S$则$b$获胜,不然$1$获胜. ...

  2. php56升级后php7 mcrypt_encrypt 报错

    mcrypt_encrypt(MCRYPT_BLOWFISH, $passphrase, $data, MCRYPT_MODE_CBC, $iv); openssl_encrypt($data, &q ...

  3. spring in action学习笔记十五:配置DispatcherServlet和ContextLoaderListener的几种方式。

    在spring in action中论述了:DispatcherServlet和ContextLoaderListener的关系,简言之就是DispatcherServlet是用于加载web层的组件的 ...

  4. 用类加载器的5种方式读取.properties文件

    用类加载器的5中形式读取.properties文件(这个.properties文件一般放在src的下面) 用类加载器进行读取:这里采取先向大家讲读取类加载器的几种方法:然后写一个例子把几种方法融进去, ...

  5. reboot和init 6之间的区别

    init命令用于改变操作系统的运行级别.Init 6是重新启动机器.reboot也是重新启动机器.那么这两个命令到底有什么区别呢?对这两个操作使用man命令看到的内容如下:"init 6&q ...

  6. 无法更新 EntitySet“W_ReceiveData”,因为它有一个 DefiningQuery,而 <ModificationFunctionMapping> 元素中没有支持当前操作的 <InsertFunction> 元素。

    无法更新 EntitySet“W_ReceiveData”,因为它有一个 DefiningQuery,而 <ModificationFunctionMapping> 元素中没有支持当前操作 ...

  7. 废弃sqlite代码,备查

    using System.Linq; using System.Text; using System.Threading.Tasks; using System.Reflection; using T ...

  8. NOIP2012提高组

    D1T1.Vigenère密码 模拟 #include<iostream> #include<cstdio> using namespace std; int main() { ...

  9. python xpath 基本用法

    转自:http://www.pythoner.cn/home/blog/python-xpath-basic-usage/ Pyer发现 业界资讯 相册 第7期:Pythoner技术交流沙龙 关于我们 ...

  10. apache快速配置简易网站

    网站源文件目录 F:\01.prj\site\static_html F:\01.prj\site\static_html 打开apache_http.conf 1 .修改网站目录 错误1 Alias ...