目录
1.计算属性之姓名案例之插值语法的实现
2.计算属性之姓名案例之methods语法的实现
3.计算属性之姓名案例之计算属性语法的实现
4.计算属性的简写方式
1.计算属性之姓名案例之插值语法的实现
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>姓名案例_插值语法实现</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
</head>
<body>
<div id="root">
姓:<input type="text" v-model="firstName">
<br><br>
名:<input type="text" v-model="lastName">
<br><br>
<!-- slice(0,3):表示显示三位 -->
<!-- 全名:<span>{{firstName.slice(0,3)}}-{{lastName}}</span> -->
全名:<span>{{firstName.slice(0,3)}}-{{lastName}}</span>
</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false
new Vue({
el:'#root',
data:{
firstName:'W',
lastName:'J'
}
});
</script>
</html>2.计算属性之姓名案例之methods语法的实现
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>姓名案例_methods实现</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
</head>
<body>
<div id="root">
姓:<input type="text" v-model="firstName">
<br><br>
名:<input type="text" v-model="lastName">
<!-- slice(0,3):表示显示三位 -->
<br><br>
全名:<span>{{getFullName()}}</span>
<br><br>
<!-- <button @click="getFullName(firstName,lastName)">点击获取全名</button> -->
</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false
new Vue({
el:'#root',
data:{
firstName:'W',
lastName:'J'
},
methods: {
getFullName(firstName,lastName){
// alert(firstName + '-' + lastName)
return this.firstName + '-' + this.lastName
}
},
});
</script>
</html>3.计算属性之姓名案例之计算属性语法的实现
计算属性是Vue中的一种特殊属性，它不存在于数据对象中，而是通过已有属性进行计算得到的。计算属性的实现原理是借助了Object.defineProperty方法提供的getter和setter函数。当初次读取计算属性时，会执行一次getter函数；当依赖的数据发生改变时，会再次调用getter函数。相比于使用methods中的函数来实现相同的计算逻辑，计算属性具有缓存机制，因此效率更高。另外，调试计算属性也更加方便。
需要注意的是，计算属性最终会出现在Vue实例的vm对象上，可以直接读取和使用。如果需要修改计算属性的值，必须在计算属性的set函数中进行响应式的更新，并确保更新的同时引起计算属性所依赖的数据发生变化。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>姓名案例_计算属性实现</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
</head>
<body>
<div id="root">
姓:<input type="text" v-model="firstName">
<br><br>
名:<input type="text" v-model="lastName">
<br><br>
全名:<span>{{fullName}}</span>
<br><br>
<!-- 由于计算属性这里有缓存所以之后的都没有调用get
但是对于method一直都会调用
-->
全名:<span>{{fullName}}</span>
<br><br>
全名:<span>{{fullName}}</span>
<br><br>
</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false
const vm = new Vue({
el:'#root',
data:{
firstName:'W',
lastName:'J'
},
// 计算属性
computed:{
fullName:{
// get的作用：当有人读取fullName时get就会被调用
// 返回值就是fullName 的值
// get的调用时机：
// 1.初次读取fullName时
// 2.所依赖的数据发生变化时(防止脏读)
get(){
return this.firstName + '-' + this.lastName
},
// set的调用时机：当fullName被修改时
set(value){
console.log('set:' + value)
const arr = value.split('-')
this.firstName = arr[0]
this.lastName = arr[1]
}
}
}
});
</script>
</html>4.计算属性的简写方式
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>姓名案例_计算属性实现</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
</head>
<body>
<div id="root">
姓:<input type="text" v-model="firstName">
<br><br>
名:<input type="text" v-model="lastName">
<br><br>
全名:<span>{{fullName}}</span>
</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false
const vm = new Vue({
el:'#root',
data:{
firstName:'W',
lastName:'J'
},
// 计算属性
// 在确定只读不改之后可以采用简写的形式
computed:{
// 完整写法
/* fullName:{
get(){
console.log('get被调用了')
return this.firstName + '-' + this.lastName
},
set(value){
console.log('set:' + value)
const arr = value.split('-')
this.firstName = arr[0]
this.lastName = arr[1]
}
} */
//简写
// 这里的function就相当于get()
// fullName:function(){
fullName(){
console.log('get被调用了')
return this.firstName + '-' + this.lastName
}
}
});
</script>
</html>
这文章真水！！！
