第八章 watch监听 85 computed-计算属性的使用和3个特点
2024-09-03 06:03:29
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--1.导入Vue的包-->
<script src=" https://cdn.jsdelivr.net/npm/vue"></script>
</head> <body>
<div id="app"> <input type="text" v-model="firstname">+
<input type="text" v-model="middlename">+
<input type="text" v-model="lastname">=
<input type="text" v-model="fullname"> <p>{{fullname}}</p>
<p>{{fullname}}</p>
<p>{{fullname}}</p>
</div> <script>
//创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el:'#app',
data:{
firstname:'',
lastname:'',
middlename:''
},
methods:{},
computed:{ //在computed中，可以定义一些 属性，这些属性，叫做【计算属性】，计算属性的本质，就是 一个方法，只不过，我们在使用 这些计算属性的时候，是把它们的名称，直接当作 属性来使用；并不会把计算属性，当作方法去调用； //注意1：计算属性，在引用的时候，一定不要加()去调用，直接把它当作 普通属性去使用就好了；
//注意2：只要计算属性，这个function内部，所用到的任何 data中的数据发生了变化，就会立即重新计算 这个计算属性的值
//注意3：计算属性的求值结果，会被缓存起来，方便下次直接使用；如果 计算属性方法所依赖的任何数据，都没有发生过变化，则，不会重新对 计算属性求值；
'fullname':function(){
console.log('ok')
return this.firstname+'-'+this.middlename+'-'+this.lastname
}
}
});
</script>
</body>
</html>
最新文章
- 微信支付Native扫码支付模式二之CodeIgniter集成篇
- DragSelectRecyclerView 长按滑动多选图像android特效
- Python实时获取贴吧邮箱名单并向其发送邮件
- jquery ajax请求时，设置请求头信息
- Hduacm—5497
- Spark(一): 基本架构及原理
- android开发环境重装系统之后的配置
- 【中国剩余定理】【容斥原理】【快速乘法】【数论】HDU 5768 Lucky7
- 个人的IDE制作（vim）——适用于C++/C
- C#里System.Data.SQLite中对GUID的处理
- eclipse怎么恢复原状
- 1013团队Beta冲刺day3
- javascript 省市区三级联动 附： json数据
- php面向对象之构造函数作用与方法
- Zynq系列FPGA如何固化bit文件到QSPI_Flash
- asp.net IHttpHandler浅析
- j2ee第五周
- √n求单值欧拉函数
- 心迹 使用说明&功能展示
- bzoj 1803: Spoj1487 Query on a tree III(主席树)