vue实例之computed
一 概念
- 计算属性：computed
```html
<div id='app'>
<div>
姓：<input type='text' v-model='first_name'>
</div>
<div>
名：<input type='text' v-model='last_name'>
</div>
<div>
全名：<input type='text' v-model='full_name'>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
first_name: '',
last_name: ''
},
computed: {
full_name: function() {
return this.first_name + this.last_name
}
}
})
</script>
```
二 代码示范
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>computed</title>
</head>
<body>
<div id="app">
<div>
<!-- v-model vue进行数据双向绑定的指令 -->
<label for="xing">姓:</label><input type="text" name="xing" v-model="fisrt_name">
</div>
<div>
<label for="ming">名:</label><input type="text" name="ming" v-model="last_name">
</div>
<div>
<!-- 通过插值表达式实现 -->
<div>姓名: {{ fisrt_name + " " + last_name }} </div>
<!-- 通过computed实现 -->
<div>姓名: {{ full_name }} </div>
<!-- 通过methods实现 -->
<div>姓名: {{ full_name_bac() }} </div>
</div>
</div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
fisrt_name: "",
last_name: "",
// full_name: ""
},
// 一个变量依赖于多个变量
// 采用computed
computed: {
full_name: function () {
// full_name对fisrt_name及last_name两个变量进行监听,两个值只有有一个变化,full_name就会随之变化,并且可以实时渲染到页面
return this.fisrt_name + " " + this.last_name;
}
},
methods: {
full_name_bac: function () {
return this.fisrt_name + " " + this.last_name;
}
}
})
</script>
</html>
