实现姓名案例:
1.插值语法实现姓名案例
直接从vm中读取。
<!doctype html>
<html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--引入Vue-->
<script type="text/javascript" src="../js/vue.js"></script>
<title>姓名案例_插值语法实现</title>
</head>
<body>
<!--设置一个容器-->
<div id = "root">
姓:<input type="text" v-model:value="firstname" ></br></br> <!--input框设置初始值用value-->
名:<input type="text" v-model:value="lastname"></br></br>
姓名:<span>{{firstname}}-{{lastname}}</span>
</div>
</body>
<script type="text/javascript">
const vm = new Vue({
el:'#root',
data:{
firstname:'张',
lastname:'三',
},
})
</script>
</html>
2.methods方法实现姓名案例
在methods方法中定义了一个fullname()方法,姓名通过fullname()方法获取到,其中的this指的是vue实例(如果是箭头函数,this指的就不是vue实例)
<!doctype html>
<html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--引入Vue-->
<script type="text/javascript" src="../js/vue.js"></script>
<title>姓名案例_methods方法实现</title>
</head>
<body>
<!--设置一个容器-->
<div id = "root">
姓:<input type="text" v-model:value="firstname" ></br></br> <!--input框设置初始值用value-->
名:<input type="text" v-model:value="lastname"></br></br>
姓名:<span>{{fullname()}}</span>
</div>
</body>
<script type="text/javascript">
const vm = new Vue({
el:'#root',
data:{
firstname:'张',
lastname:'三',
},
methods:{
fullname(){
return this.firstname + '-' + this.lastname;
}
},
})
</script>
</html>
3.计算属性实现姓名案例
(1) 计算属性:是用已经写完的属性加工、计算,生成一个全新的属性。
原理:底层借助了Object.defineproperty提供getter和setter(计算属性修改相应,大多数情况下,计算属性是不修改的)。
优势:与methods相比,内部有缓存机制(复用),效率更高,调试方便。
<!doctype html>
<html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--引入Vue-->
<script type="text/javascript" src="../js/vue.js"></script>
<title>姓名案例_计算属性实现</title>
</head>
<body>
<!--设置一个容器-->
<div id = "root">
姓:<input type="text" v-model:value="firstname" ></br></br> <!--input框设置初始值用value-->
名:<input type="text" v-model:value="lastname"></br></br>
姓名:<span>{{fullname}}</span>
</div>
</body>
<script type="text/javascript">
const vm = new Vue({
el:'#root',
data:{
firstname:'张',
lastname:'三',
},
computed:{
fullname:{
/*get有什么作用?当有人读取fullname时,get就会被调用,并且get的返回值就是fullname的返回值*/
/*get什么时候读取?(1)初次读取fullname时;(2)所依赖的数据发生变化时(此处依赖firstname和lastname)*/
get(){
return this.firstname + "-" + this.lastname
},
/*set什么时候调用?当fullname被修改时*/
set(value){
const arr = value.split('-')
this.firstname = arr[0]
this.lastname = arr[1]
}
}
}
})
</script>
</html>
(2)计算属性在只考虑读取,不考虑修改时可以简写,fullname可以当做函数来写,但是读取时不能当做函数读取。
computed:{
fullname() {
return this.firstname + "-" + this.lastname;
}
}