文档章节

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

博为峰教研组
 博为峰教研组
发布于 2017/03/16 14:32
字数 323
阅读 14
收藏 0

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

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

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

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script src="src/vue.min.js"></script>

</head>

<body>

<div id="app">

{{message.split('-').join(".")}}

</div>

<script type="text/javascript">

new Vue({

el:"#app",

data:{

message:"2017-3-15"

 

}

})

</script>

</body>

</html>

运行结果如下:

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

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

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script src="src/vue.min.js"></script>

</head>

<body>

<div id="app">

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

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

</div>

<script type="text/javascript">

new Vue({

el:"#app",

data:{

message:"2017-3-15"

 

},

computed:{

reversedMessage:function () {

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

}

}

})

</script>

</body>

</html>

运行结果为:

 

 

© 著作权归作者所有

共有 人打赏支持
博为峰教研组
粉丝 50
博文 1224
码字总数 479077
作品 0
黄浦
程序员
私信 提问
Vue进阶(二十七):getters,mapGetters,...mapGetters详解

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sunhuaqiang1/article/details/85221092 Vuex提供了state这样的状态统一管理树,你可以在vue中用computed计算属...

Lo秀娴ve
2018/12/23
0
0
Vue源码阅读 - 依赖收集原理

vue已是目前国内前端web端三分天下之一,同时也作为本人主要技术栈之一,在日常使用中知其然也好奇着所以然,另外最近的社区涌现了一大票vue源码阅读类的文章,在下借这个机会从大家的文章和...

SHERlocked93
2018/07/09
0
0
Vue新手向:14篇教程带你从零撸一个Todo应用

欢迎来到 Vue2.x Todo 系列教程,这个教程将手把手教你从零开始使用 Vue 搭建一个 Todo(待办事项)应用。 书写此教程的动机 Vue 作者尤雨溪在 新手向:Vue 2.0 的建议学习顺序 中给出了中肯...

追梦人物
01/16
0
0
mpvue: vuejs和小程序碰撞出来的火花

微信自推出小程序以来,热度一直居高不下,各大公司开始专门开发小程序,但是小程序自定义的wxml和wxss和自己定义的语法,让被三大框架统治的前端江湖头疼不易,因为需要专门为小程序开发一...

蜗牛老湿
2018/05/18
0
0
【译】Vue 的小奇技(第七篇):在 vue-multiselect 基础上创建 ImageSelect 组件

原文地址:Create an ImageSelect component on top of vue-multiselect 原文作者:Alex Jover 译者:程序猿何大叔 特别声明:本文是作者 Alex Jover 发布在 VueDose 上的一个系列。 版权归作...

程序猿何大叔
02/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

指针数组和数组指针的区别

这两个名字不同当然所代表的意思也就不同。我刚开始看到这就吓到了,主要是中文太博大精深了,整这样的简称太专业了,把人都绕晕了。从英文解释或中文全称看就比较容易理解。 指针数组:arr...

天王盖地虎626
20分钟前
0
0
Qt那些事0.0.18

今天要记一下Qt中的Resource。自我感觉理解的不错,但是还会难免有谬误,在日后有可能会更新,也有可能不会。 小声的念叨一句,女人心,海底针。 今天就直接跳过了关于QML在qrc文件中的介绍,...

Ev4n
28分钟前
0
0
深入解析js的作用域、预解析机制

虽然,ES6在我们工作中应用得越来越广泛,但是还是很多项目保留着ES5的写法,所以,今天,带着大家重新巩固下ES5下的作用域及预解析机制。 概念: 作用域:域,指的是一个空间、范围、区域,...

前端攻城老湿
31分钟前
0
0
Spring Cloud Feign - 声明式 REST Client

1、Feign是什么 声明式REST client,来自NetFlix。 允许你编写无实现代码调用REST services 替换RestTemplate(甚至更简单) Spring Cloud 为使用Feign提供了包装器 2、怎样使用Feign 对比:...

Benz001
36分钟前
2
0
前端、后端和全栈到底不该学什么

1、前言 在职业规划咨询过程中经常会被问到这样的问题: 老师,我是该深入钻研专精一门,走技术大牛路线,还是所有都要精通,做一个全栈工程师? 类似问题的变种还有,老师我是不是该30岁最迟...

前端攻城小牛
38分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部