引入
- 案例
差值语法实现
<body>
<div id="app">
姓: <input @keyup="" v-model="lastName" type="text"> <br>
名: <input @keyup="" v-model="name" type="text"> <br>
全名: <span>{{lastName.slice(0,4)}} - {{name}}</span>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el: "#app",
data() {
return {
lastName: '张',
name: '三'
};
}
});
</script>
</body>
methods方法实现
<body>
<div id="app">
姓: <input @keyup="" v-model="lastName" type="text"> <br>
名: <input @keyup="" v-model="name" type="text"> <br>
全名<span>{{fullName()}}</span>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el: "#app",
data() {
return {
lastName: '张',
name: '三'
};
},
methods: {
fullName(){
return lastName.slice(0,4) + name;
}
}
});
</script>
</body>
计算属性简介
- 要显示的数据不存在,要通过计算得来。
- 在 computed 对象中定义计算属性。
- 在页面中使用{{方法名}}来显示计算的结果。
使用计算属性
body>
<div id="app">
姓: <input @keyup="" v-model="lastName" type="text"> <br>
名: <input @keyup="" v-model="name" type="text"> <br>
全名<span>{{fullName}}</span>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
var vm = new Vue({
el: "#app",
data() {
return {
lastName: '张',
name: '三'
};
},
computed: {
fullName:{
get(){
return this.lastName.slice(0,4) + "-" + this.name;
},
set(value){
let arr = value.split("-");
this.lastName = arr[0];
this.name = arr[1];
}
}
}
});
</script>
</body>
```
# 简写
```html
<body>
<div id="app">
姓: <input @keyup="" v-model="lastName" type="text"> <br>
名: <input @keyup="" v-model="name" type="text"> <br>
全名<span>{{fullName}}</span>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
var vm = new Vue({
el: "#app",
data() {
return {
lastName: '张',
name: '三'
};
},
computed: {
fullName(){
return this.lastName.slice(0,4) + "-" + this.name;
}
}
});
</script>
</body>
```