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中方法都实 ...
随机推荐
- js 判断对象类型
在企业级的开发中,我们常用 typeof 来判断企业 对象类型:但是 typeof 不能判断 Array 和 null 这里我们使用一个 原型上的 toString方法:请看一下代码: <scr ...
- Codeforces Round #364 (Div. 2) B 标记
B. Cells Not Under Attack time limit per test 2 seconds memory limit per test 256 megabytes input st ...
- 洛谷 P1362 兔子数
题目描述 设 S(N ) 表示 N 的各位数字之和,如 S(484) = 4+8+4 = 16, S(22) = 2+2 = 4.如果一个正整数满足 S(x*x) = S(x) *S(x),我们称之为 ...
- hdu 1847 Good Luck in CET-4 Everybody! 组合游戏 找规律
题目链接 题意 有\(n\)张牌,两人依次摸牌,每次摸的张数只能是\(2\)的幂次,最后没牌可摸的人为负.问先手会赢还是会输? 思路 0 1 2 3 4 5 6 7 8 9 10 11 -- P N ...
- 将一个二叉树左右翻转(Java 版)
public class Solution { public TreeNode invertTree(TreeNode root) { if (root == null) { return null; ...
- 《Linux命令行与shell脚本编程大全 第3版》Linux命令行---50
以下为阅读<Linux命令行与shell脚本编程大全 第3版>的读书笔记,为了方便记录,特地与书的内容保持同步,特意做成一节一次随笔,特记录如下:
- Goodbye 2017 B
[题意]: 鲍勃编程一个机器人在2d迷宫中导航.迷宫有一些障碍.空单元格用'.'表示,其中障碍物用'#'表示.迷宫中有一个机器人.它的起始位置用字符“S”表示.这个位置没有任何障碍.迷宫中也有一个出口 ...
- CS Academy Round #65 Count Arrays （DP）
题目链接 Count Arrays 题意 给定$n$和$m$个区间.若一个长度为$n$的$01$序列满足对于每一个给定的区间中至少有一个位置是$0$, 那么这个$01$序列满足条件.求有多少满足条 ...
- Codeforces 739B Alyona and a tree(树上路径倍增及差分)
题目链接 Alyona and a tree 比较考验我思维的一道好题. 首先,做一遍DFS预处理出$t[i][j]$和$d[i][j]$.$t[i][j]$表示从第$i$个节点到离他第$2^{j}$ ...
- oracle的锁与并发机制
锁是并发访问的时候用于保护不共享资源不被同时并发修改的机制.oracle锁分为DML锁,DDL锁,内部锁和latch DML锁确保一次只能只有一个人修改某一行(TX锁),而且正在处理一个表时别人不能删 ...