Vue.js学习系列（二十七）-- 计算属性（一）

2019独角兽企业重金招聘Python工程师标准>>>

在模板中表达式非常便利，但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑，应当使用计算属性。计算属性关键词: computed。计算属性在处理一些复杂逻辑时是很有用的。

我们来看一个例子，先不使用计算属性

实现将2017-3-15转换为2017.3.15

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</div>

new Vue({

el:"#app",

data:{

message:"2017-3-15"

}

})

</script>

</body>

</html>

运行结果如下：

上面的模板变的很复杂起来，也不容易看懂理解。

接下来我们看看使用了计算属性的实例：

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<p>原始字符串:{{message}}</p>

<p>修改后的字符串:{{reversedMessage}}</p>

</div>

new Vue({

el:"#app",

data:{

message:"2017-3-15"

computed:{

reversedMessage:function () {

return this.message.split('-').join(".")

}

})

</script>

</body>

</html>

运行结果为：

转载于:https://my.oschina.net/u/2971691/blog/860620

Vue.js学习系列（二十七）-- 计算属性（一）相关推荐

Vue.js学习系列七——Vue服务器渲染Nuxt学习
我又回来啦~这次我们来学习Vue的服务器渲染SSR. 关于SSR的文章网上很多,一开始看得我云里雾里.然后去Vue.js 服务器渲染指南和nuxt官网看了看,发现文章大多都是搬运官网的内容,真正讲的清 ...
Vue.js 学习笔记二，一些输出指令
Vue的一些输出指令 {{字段}},v-text指令,v-html指令 <html> <head><meta name="viewport" cont ...
Vue.js学习系列（二十八）-- 计算属性（二）
2019独角兽企业重金招聘Python工程师标准>>> 2. computed 与 methods区别我们可以使用 methods 来替代 computed,效果上两个都是一样的, ...
Vue.js学习系列（四十二）-- Vue.js组件
2019独角兽企业重金招聘Python工程师标准>>> 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.组件系统让我们可以用独立 ...
vue.js学习系列-第二篇
一 VUE实例生命周期钩子 1 生命周期函数定义生命周期函数就是vue在某一时间点自动执行的函数 2 具体函数 1 new vue() 2 be ...
Vue语法学习第三课——计算属性
模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.对于任何复杂逻辑,都应当使用计算属性. <div id="example&qu ...
Vue.js学习系列（三十四）-- Vue.js样式绑定（五）
2019独角兽企业重金招聘Python工程师标准>>> 2. Vue.js style(内联样式) 我们可以在 v-bind:style 直接设置样式: <!DOCTYPE h ...
Vue.js学习系列（八）---使用路由搭建单页应用(一)
2019独角兽企业重金招聘Python工程师标准>>> 之前已经通过命令 cnpm install vue-router --save 安装了vue-router.接下里我们在web ...
【Python学习系列二十七】pearson相关系数计算
场景:计算训练特征和目标之间的相关系数,用于判断是否加入训练. 参考代码: # -*- coding: utf-8 -*-import pandas as pd import time from sk ...

Vue.js学习系列（二十七）-- 计算属性（一）

Vue.js学习系列（二十七）-- 计算属性（一）相关推荐

最新文章

热门文章