Vue系列之 => computed实现求值
2024-09-23 19:12:52
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
<title>管理后台</title>
<script src="../lib/jquery2.1.4.min.js"></script>
<script src="../lib/Vue2.5.17.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="app">
<input type="text" v-model="firstname"> +
<input type="text" v-model="lastname"> +
<input type="text" v-model="fullname"> +
<!-- 把fullname定义到computed属性中 -->
<p>{{ fullname }}</p>
<p>{{ fullname }}</p>
<p>{{ fullname }}</p>
</div>
<script>
var vm = new Vue({
el : '#app',
data : {
firstname : '',
lastname : '',
},
methods: { },
computed: { //在computed中可以定义一些属性,这些属性叫做计算属性的本质就是一个方法
// 只不过我们在使用 这些计算属性的时候,是把它们的名称直接当作属性来使用
// 并不会把计算属性当一个方法调用
// 注意:计算属性在引用的时候一定不要加小括号去调用,直接把他当作普通 属性去使用
// 只要计算属性这个function内部所用到的任何data中的数据发生了变化就会立即重新计算这个属性的值
// 计算属性的求值结果会被缓存起来,方便下次直接使用,如果计算属性方法中所依赖的任何数据都没发生过变化,则不会对计算属性求值
'fullname' : function(){
console.log('ok');
return this.firstname + ' - ' + this.lastname
}
}, // watch,computed,和methods之间的对比。
// computed 属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算值,主要当作属性来使用
// methods 方法表示一个具体的操作,主要用来写业务逻辑
// watch 一个对象,键是需要观察的表达式,值是对应回调函数,主要用来监听某些特定数据的变化从而进行某些具体的业务逻辑操作
})
</script>
</body>
</html>
最新文章
- C#设计模式之装饰者
- Max Points on a Line
- 基于redis分布式锁实现“秒杀”
- python脚本-开机自动联网
- vs2008编译openssl问题
- hdu 5067 Harry And Dig Machine (状态压缩dp)
- codeforces 260 div2 C题
- 【转】shell 教程——01 Shell简介:什么是Shell,Shell命令的两种执行方式
- python 中 json的处理
- Python学习——(1)Centos安装Flask
- 用感知机(Perceptron)实现逻辑AND功能的Python3代码
- R语言实战基本方法
- vue内置组件 transition 和 keep-alive 使用
- 美团点评基于MGR的CMDB高可用架构搭建之路【转】
- 日志审计系统、事件日志审计、syslog审计
- 微信小程序与Vue js数据渲染对比
- 聊聊jdbc statement的fetchSize
- Pause Web Sessions
- Spark On Yarn Cluster生产环境下JVM的OOM和Stack Overflow问题
- 利用goole guava 下载文件到本地