vue9 计算属性 computed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script> </script>
</head>
<body>
<div id="box">
{{a}}
<br>
{{b}}
</div>
<script>
var vm=new Vue({
el:'#box',
data:{
a:1
},
computed:{
b:function(){//默认调用get
//业务逻辑代码
return 2;
}
}
}); console.log(vm.a);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script> </script>
</head>
<body>
<div id="box">
{{a}}
<br>
{{b}}
</div>
<script>
var vm=new Vue({
el:'#box',
data:{
a:1
},
computed:{
b:function(){
//业务逻辑代码
return this.a+1;
}
}
}); document.onclick=function(){
vm.a=101;
};
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script> </script>
</head>
<body>
<div id="box">
{{a}}
<br>
{{b}}
</div>
<script>
var vm=new Vue({
el:'#box',
data:{
a:1
},
computed:{//computed里面可以放置一些业务逻辑代码，一定记得return
b:{
get:function(){
return this.a+2;
},
set:function(val){
this.a=val;
}
}
}
}); document.onclick=function(){
vm.b=10;
};
</script>
</body>
</html>
vue9 计算属性 computed的更多相关文章
- Vue学习3：计算属性computed与监听器
下面是计算属性相关代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- vue从入门到进阶：计算属性computed与侦听器watch（三）
计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...
- 温故vue对vue计算属性computed的分析
vue 复习笔记(1)一段时间没有看过vue的官方文档了,温故而知新,所以我决定将vue的文档在看一遍 1计算属性computed在vue的computed中声明的是计算属性,可以使用箭头函数来进行定 ...
- vue2.0中的watch和计算属性computed
watch和computed均可以监控程序员想要监控的对象,当这些对象发生改变之后,可以触发回调函数做一些逻辑处理 watch监控自身属性变化 <!DOCTYPE html> <ht ...
- Vue教程：计算属性computed与侦听器watch（三）
计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...
- vue利用watch侦听对象具体的属性 ~ 巧用计算属性computed做中间层
有时候需要侦听某个对象具体的属性,可以按下面案例进行: <template> <div> <input type="text" v-model=&qu ...
- 007——VUE中非常使用的计算属性computed实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 计算属性 computed
计算属性 computed 计算缓存 vs Methods <div id="example"> <p>Original message: "{{ ...
- Vue.js 计算属性(computed)
Vue.js 计算属性(computed) 如果在模板中使用一些复杂的表达式,会让模板显得过于繁重,且后期难以维护.对此,vue.js 提供了计算属性(computed),你可以把这些复杂的表达式写到 ...
随机推荐
- NodeJS学习笔记 (2)文件系统操作-fs(ok)
原文:https://github.com/chyingp/nodejs-learning-guide/blob/master/%E6%A8%A1%E5%9D%97/fs.md#%E9%80%9A%E ...
- UVA-1331 Minimax Triangulation 区间dp 计算几何 三角剖分 最大三角形最小化
题目链接:https://cn.vjudge.net/problem/UVA-1331 题意 给一个任意多边形,把它分为多个三角形. 求某方案中最大的三角形是各方案中最小的面积的三角形面积. 思路 学 ...
- 关于python 中的偏函数转载
Python的functools模块提供了很多有用的功能,其中一个就是偏函数(Partial function).要注意,这里的偏函数和数学意义上的偏函数不一样. 在介绍函数参数的时候,我们讲到,通过 ...
- eclipse/myeclipse中js/java的自动提示只有4个字符怎么解决
https://blog.csdn.net/LinBM123/article/details/80450690
- 锐捷SNMp注意：
http://www.ruijie.com.cn/fw/wt/18855 1)设备名称.运行时间.sysOID.设备描述.联系人.设备位置:分别来自RFC-1213-MIB的system组中的sysN ...
- hadoop hdfs空间满后重新启动不了
server检查的时候,发现存在HDFS上的文件无法同步.再发现hadoop停掉了. 进行重新启动,重新启动不成功. 查看hadoop日志: 2014-07-30 14:15:42,025 INFO ...
- Mongodb集群之副本集
上篇咱们遗留了几个问题 1主节点是否能自己主动切换连接? 眼下须要手动切换 2主节点读写压力过大怎样解决 3从节点每一个上面的数据都是对数据库全量拷贝,从节点压力会不会过大 4数据压力达到机器支撑不了 ...
- 将一个文件夹纳入library或者移除remove
https://support.microsoft.com/en-us/help/4026298/windows-show-libraries-in-file-explorer To show lib ...
- ThinkPHP5中find()和select()区别
ThinkPHP5中find()和select()区别 读取数据是指读取数据表中的一行数据(或者关联数据),主要通过find方法完成,例如: 1 2 3 4 $User = M("User& ...
- nyoj--1009--So Easy[Ⅰ]（数学）
So Easy[Ⅰ] 时间限制:1000 ms | 内存限制:65535 KB 难度:2 描述 给出任意一个三角形的三个边a,b,c. 要求:求出这个三角形的外接圆半径. 输入 输入数据有多组. ...