1、computed
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>名称案例</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="firstname">+
<input type="text" v-model="lastname">=
<input type="text" v-model="fullname">
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
firstname:'',
lastname:''
},
methods:{},
computed:{//可定义一些属性，计算属性，本质是一个方法，在使用时把他们的名称当做属性来使用，并不会当做方法调用
//注意：1、计算属性引用时，不加（），当做普通属性
//2、只要计算属性function内部所用到的任何data中数据发生变化，立客重新计算
//3、计算属性的求值结果会被缓存起来，方便下次直接使用，如果依赖的所有data不变，不会重新计算
'fullname':function(){
return this.firstname + '-' + this.lastname
}
}
});
</script>
</body>
</html>2、keyup
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>名称案例</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="firstname" @keyup="getFullname">+
<input type="text" v-model="lastname" @keyup="getFullname">=
<input type="text" v-model="fullname">
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
firstname:'',
lastname:'',
fullname:''
},
methods:{
getFullname(){
this.fullname=this.firstname + '-' + this.lastname;
}
}
});
</script>
</body>
</html>3、watch
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>名称案例</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="firstname">+
<input type="text" v-model="lastname">=
<input type="text" v-model="fullname">
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
firstname:'',
lastname:'',
fullname:''
},
methods:{},
watch:{//监视data中指定数据的变化，然后触发watch中对应的function
'firstname':function(newVal,oldVal){//属性名有-，必加引号
// this.fullname = this.firstname + '-' + this.lastname
this.fullname = newVal + '-' + this.lastname
},
'lastname':function(newVal){
this.fullname = this.firstname + '-' + newVal
}
}
});
</script>
</body>
</html>
版权声明：本文为yueliang0423原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。