vue2.X computed 计算属性
需求：数据msg值为12345，我们现在需要反向显示成54321。
1.在模板中绑定表达式是非常便利的，但是它们实际上只用于简单的操作。在模板中放入太多的逻辑会让模板过重且难以维护。例如：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
{{msg}}
<hr>
{{ msg.split('').reverse().join('') }}
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
data:{
msg:'12345'
}
});
</script>
</body>
</html>
效果图：
Vue提供computed的方式。例如：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
{{msg}}
<hr>
{{reMsg}}
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
data:{
msg:'12345'
},
computed:{
reMsg:function(){
return this.msg.split('').reverse().join('')
}
}
}); console.log(vm.reMsg);
</script>
</body>
</html>
效果图：
同样的可以达到效果！
注：
但是这边的reMsg是不能被修改的！！ 也就是修改的时候他不会按照我们js给的规则去向反显示，因为默认只有getter，我们可以提供一个setter:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
{{msg}}
<hr>
{{reMsg}}
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
data:{
msg:'12345'
},
computed:{
reMsg:{
get:function(){
return this.msg.split('').reverse().join('')
},
set:function(value){
this.msg = value; //最后修改了msg
}
}
}
}); console.log(vm.reMsg = 'abcde'); //当我们修改这个变量的时候他的值也是跟随着我们js规则反向显示
</script>
</body>
</html>
效果图：
.
vue2.X computed 计算属性的更多相关文章
- vue computed计算属性和watch监听属性解疑答惑
computed计算属性 计算属性类似于方法,用于输出data中定义的属性数据的结果,data数据变化时,计算属性的结果会同步变化,需要注意的是计算属性不可与data定义的属性同名. 相比于方 ...
- Vue之computed计算属性
demo.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...
- 深入理解 Vue Computed 计算属性
Computed 计算属性是 Vue 中常用的一个功能,我们今天来说一下他的执行过长 拿官网简单的例子来看一下: <div id="example"> <p> ...
- Vue（七）：computed计算属性
简介 计算属性关键词: computed. 计算属性在处理一些复杂逻辑时是很有用的. 实例1 可以看下以下反转字符串的例子: <div id="app"> {{ mes ...
- Vue的computed计算属性是如何实现的
一个开始 有如下代码,full是一个计算属性,开始,他的值是'hello world',1s后,msg变成了‘I like’, full的值同步变成了'I like world';其原理解析来看一下. ...
- 043——VUE中组件之使用.sync修饰符与computed计算属性实现购物车原理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- computed 计算属性
wepyjs - 小程序组件化开发框架 https://tencent.github.io/wepy/document.html#/?id=wepy%e9%a1%b9%e7%9b%ae%e7%9a%8 ...
- vue computed计算属性 watch监听
计算属性 computed:{ 变量:function(){ return 计算好的值 } } 这时候计算好的值 就付给了你的变量 在实例中可以this.使用 注意 声明的变量的data中不可以重复声 ...
- vue-methods方法与computed计算属性的差别
好吧,我就是单纯的举个例子:实现显示变量 message 的翻转字符串 第一种:methods:我们可以通过在表达式中调用方法来达到同样的效果: 第二种:computed:计算属性 上面的2中方法都实 ...
随机推荐
- Linux性能分析调优工具介绍
1.常用性能分析工具 1)CPU性能分析工具 vmstat ps sar time strace pstree top 2)Memory性能分析工具 vmstat strace top ipcs ip ...
- 抓取js动态生成数据
最近在抓数据,一般的网页数据抓取相对容易一些,今天在抓电视猫的节目单,发现有些数据时抓取不到的,Java端得到的HTML文件里面没有某一段代码,查了很多资料,发现说是js动态生成的数据,无法直接抓取, ...
- Juice Junctions
Juice Junctions 题目描述 你被雇佣升级一个旧果汁加工厂的橙汁运输系统.系统有管道和节点构成.每条管道都是双向的,且每条管道的流量都是11升每秒.管道可能连接节点,每个节点最多可以连接3 ...
- 论文笔记《Notes on convolutional neural networks》
这是个06年的老文章了,但是很多地方还是值得看一看的. 一.概要 主要讲了CNN的Feedforward Pass和 Backpropagation Pass,关键是卷积层和polling层的BP推导 ...
- git常见操作总结
git config --global user.name "liyang"git config --global user.email "liyangslj@126.c ...
- Python与其他语言时间戳
时间戳是自 1970 年 1 月 1 日(00:00:00 GMT)以来的秒数.它也被称为 Unix 时间戳(Unix Timestamp). Unix时间戳(Unix timestamp),或称Un ...
- POJ 2168 Popular cows [Tarjan 缩点]
...
- Linux signal 那些事儿（4）信号的deliver顺序【转】
转自:http://blog.chinaunix.net/uid-24774106-id-4084864.html 上一篇博文提到了,如果同时有多个不同的信号处于挂起状态,kernel如何选择deli ...
- Android build code command
make bootimage -j8 make systemimage -j8
- cisco packet 实验教程（二）
06. 三层交换机实现VLAN间路由 技术原理 1)三层交换机是带有三层路由功能的交换机,也就是这台交换机的端口既有三层路由功能,也具有二层交换功能.三层交换机端口默认为二层口,如果需要启用三层功能就 ...