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),你可以把这些复杂的表达式写到 ...
随机推荐
- POJ 3134 Power Calculus (迭代剪枝搜索)
题目大意:略 题目里所有的运算都是幂运算,所以转化成指数的加减 由于搜索层数不会超过$2*log$层,所以用一个栈存储哪些数已经被组合出来了,不必暴力枚举哪些数已经被搜出来了 然后跑$iddfs$就行 ...
- 堆(Heap)-c实现
这个堆的实现采用数组存储的完全二叉树实现. 最近有点烦躁,先是跳槽到了一个外包公司,感觉2016有点坑,另外一件事就是老婆怀孕了,但是在家里没人照顾,很担心. 这个堆的实现就暂时不优化了,基本的插入, ...
- ProGuard常见问题及解决套路
ProGuard是一个压缩.优化和混淆Java字节码的工具,非常好用.本篇文章总结一下许多人在使用ProGuard时经常遇到的问题. 我把在使用ProGuard时经常遇到的问题分为两类,分别是导致构建 ...
- WPF 封装 dotnet remoting 调用其他进程
原文:WPF 封装 dotnet remoting 调用其他进程 本文告诉大家一个封装好的库,使用这个库可以快速搭建多进程相互使用. 目录 创建端口 调用软件 运行的类 运行C++程序 通道 使用 在 ...
- ADT+NDK搭建jni编译环境
jni是android调用C++编写的库的接口.C++和java的差别不在此文的讨论范畴,另外这里也仅仅是记录下.怎样搭建好开发环境. 首先是下载ADT包和NDK包. ADT包包括了eclipse.所 ...
- 三层登录—c#
学习了三层,有一个登录窗口的小练习.是我们第一次接触三层的初战.如今仅仅是简单的了解了一些,须要学习的还有非常多,以下浅谈自己的理解. 我们说的三层就是分层了显示层.业务逻辑层和数据訪问层.当中显示层 ...
- Android BlueDroid（二）：BlueDroid蓝牙开启过程init
关键词:bluedroid initNative enableNative BTIF_TASK BTU_TASKbt_hc_work_thread set_power preload GKI作 ...
- JNI中java类型的简写
在JNI中,当我们使用GetFieldID/GetStaticFieldID或GetMethodID/GetStaticMethodID及定义JNINativeMethod等时,我们需要表示成员变 ...
- 福建省赛--Problem E The Longest Straight(标记+二分)
Problem E The Longest Straight Accept: 71 Submit: 293 Time Limit: 1000 mSec Memory Limit : 327 ...
- 页面出现AXURE RP EXTENSION，怎么办？
(可参考百度经验,地址:https://jingyan.baidu.com/article/54b6b9c0c1cb762d583b4706.html) 本文以强大如斯的谷歌浏览器来说明,怎么查看Ax ...