模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。对于任何复杂逻辑,都应当使用计算属性。

<div id="example">
<p>
original message : "{{message}}"
</p>
<p>
computed reversed message : "{{reverseMessage}}"
</p> </div> <script>
var vm = new Vue({
el:"#example",
data:{
message : "zxq"
},
computed : {
reverseMessage : function(){
return this.message.split('').reverse().join('');
}
}
});
</script>

同样的效果也可以通过在表达式中调用methods实现。

注:计算属性是基于他们的依赖进行缓存的,只有在相关依赖发生改变时,计算属性才会重新求值。

如上示例,只有当message改变时,多次访问 reverseMessage 计算属性才会再次执行函数,否则会返回之前的结果。

而对比methods,总是会再次执行函数。

computed 和 watch

<div id="app0">
firstname : <input type="text" v-model="firstName"/><br/>
lastname : <input type="text" v-model="lastName"/>
<p>
my name is : {{fullName}}
</p>
</div>

① watch

    var vm = new Vue({
el: '#app0',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})

② computed

     var vm = new Vue({
el: '#app0',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})

相比之下,计算属性更为简洁

计算属性默认只有get方法,但在必要时也可以提供一个set方法

  <div id="example">
firstname : <input type="text" v-model="firstName"/><br/>
lastname : <input type="text" v-model="lastName"/><br/>
my name is   :  <input v-model="fullName" /> </div> <script>
var vm = new Vue({
el:"#example",
data: {
firstName: 'zhu',
lastName: 'xingqing'
},
computed : {
fullName : {
get : function(){
return this.firstName + ' ' + this.lastName
},
set : function(newVal){
newfull = newVal.split(' ');
this.firstName = newfull[0];
this.lastName = newfull[1];
}
}
}
});
</script>

Vue语法学习第三课——计算属性的更多相关文章

  1. Vue语法学习第四课(2)——class与style的绑定

    之前学到的指令 v-bind 在用于绑定class和style时,表达式结果可以是字符串.数组.对象. 一.绑定HTMLClass ① 对象语法 <div class="static& ...

  2. Vue语法学习第五课——条件渲染

    ① v-if .v-else-if .v-else <div v-if="type === 'A'"> A </div> <div v-else-if ...

  3. Vue语法学习第四课(1)——组件简单示例

    在 Vue 里,一个组件本质上是一个拥有预定义选项的一个 Vue 实例. 设法将应用分割成了两个更小的单元.子单元通过 prop 接口与父单元进行了良好的解耦. <div id="ap ...

  4. Vue.js-05:第五章 - 计算属性与监听器

    一.前言 在 Vue 中,我们可以很方便的将数据使用插值表达式( Mustache 语法)的方式渲染到页面元素中,但是插值表达式的设计初衷是用于简单运算,即我们不应该对差值做过多的操作.当我们需要对差 ...

  5. Elasticsearch7.X 入门学习第三课笔记----search api学习(URI Search)

    原文:Elasticsearch7.X 入门学习第三课笔记----search api学习(URI Search) 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出 ...

  6. 【Vue】浅谈Vue(一):从模板语法数据绑定、指令到计算属性

    写在前面 今年前端届比较有意思,从大漠穷秋发表文章比较angular和vue,继而致歉vue作者.社区,从谷歌辞去Angular Developer PM in China一职并且呼吁大家停止各种无谓 ...

  7. Vue.js基本规则提炼总结及计算属性学习

    Vue.js基本须知: 1)以“{{}}”格式 “Mustache” 语法(双大括号)来绑定表达式输出文本值; 2)以“{{{}}}”格式绑定原始的html,绑定的表达式内为字符串格式的html内容, ...

  8. vue从入门到进阶:计算属性computed与侦听器watch(三)

    计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...

  9. Vue 2.0学习(四)计算属性

    {{}}模板内的表达式常用于简单的运算,当运算过长或逻辑复杂时,会难以维护. <div> {{ text.split(',').reverse().join('') }} </div ...

随机推荐

  1. VS code 推荐插件

    vs code 中eslint语法检测,保存即可格式化 具体查看:(https://www.jianshu.com/p/23a5d6194a4b) { // vscode默认启用了根据文件类型自动设置 ...

  2. 基于python的Splash基本使用和负载均衡配置

    0.引言 由于在软件工程综合实践专题课程中,老师要求在博客园发表博客我自己做过的小项目,本博客为课程第一篇博客 本项目来源于寒假学习python网络爬虫时所做的实战小项目,经过精心挑选,选择了页面动态 ...

  3. linux 复制文件

    1 复制指定目录下的全部文件到另一个目录中. 若dir2目录不存在,则可以直接使用: cp -r dir1 dir2 若dir2目录存在,则需要使用: cp -r dir1/. dir2 若dir2目 ...

  4. Android测试(三)——burpsuite抓包设置

    导出证书: 将证书导入模拟器中: 设置监听端口,透明代理(一定要设置这个): 进入adb shell,输入如下命令,即可抓包了:  iptables -t nat -A OUTPUT -p tcp - ...

  5. 初步接触gulp

    首先是安装nodejs,通过nodejs的npm全局安装和项目安装gulp,其次在项目里安装所需要的gulp插件,然后新建gulp的配置文件gulpfile.js并写好配置信息(定义gulp任务),最 ...

  6. 使用Visual Studio Installer 2015打包WPF程序

    前言 做过WPF项目,就少不了要将程序打包部署到客户现场,因为一般长时间不会更新打包程序,每次变动较大需要重新配置打包程序时,就会有些生疏,不那么得心应手.为了方便记忆,记录到博客中. 准备 因为做过 ...

  7. jsp转发与重定向的区别

    1.转发的实现其实很简单,使用request的getRequestDispatch()方法得到RequestDispatch对象,然后在括号里放转发的地址,然后用这个对象调用forward()方法,里 ...

  8. 汇编语言实验1 & macOS下DOSBox的安装

    一.macOS下DOSBox的安装 1.在官网下载DOSBox-0.74.dmg 打开,此时默认z盘 一番折腾,终于搞定debug 然后为了不用每次都执行mount,遂更改配置文件自动挂在目录 再次打 ...

  9. yeoman 前端自动化构建工具 generator-fountain-webapp

    直接上我的github地址. https://github.com/631535199/yo-react

  10. 图片转成Base64

    var img = "imgurl";//imgurl 就是你的图片路径 function getBase64Image(img) { var canvas = document. ...