1. 插值表达式实现
需要对显示的全名进行处理时，插值表达式中虽然可以写 js 表达式，但是任意过长，造成代码不易阅读
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>姓名案例</title> <script src="./js/vue.js"></script> </head> <body> <div id="app"> 姓：<input type="text" v-model="firstName"> <br><br> 名：<input type="text" v-model="lastName"> <br><br> 全名：{{firstName}}-{{lastName}} </div> <script> const vm = new Vue( { el: '#app', data: { firstName: '张', lastName: '三' } } ) </script> </body> </html>
2. 使用方法实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>姓名案例</title> <script src="./js/vue.js"></script> </head> <body> <div id="app"> 姓：<input type="text" v-model="firstName"> <br><br> 名：<input type="text" v-model="lastName"> <br><br> 全名：{{getFullName()}} </div> <script> const vm = new Vue( { el: '#app', data: { firstName: '张', lastName: '三' }, methods: { getFullName() { return this.firstName+"-"+this.lastName } } } ) </script> </body> </html>
在插值表达式中调用方法，需要写圆括号，否则输出的为函数
<div id="app"> 姓：<input type="text" v-model="firstName"> <br><br> 名：<input type="text" v-model="lastName"> <br><br> 全名：{{getFullName}} </div>
函数每用一次都会调用一次，数据每次发生一次改变，函数也会重新调用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>姓名案例</title> <script src="./js/vue.js"></script> </head> <body> <div id="app"> 姓：<input type="text" v-model="firstName"> <br><br> 名：<input type="text" v-model="lastName"> <br><br> 全名：{{getFullName()}} 全名：{{getFullName()}} 全名：{{getFullName()}} 全名：{{getFullName()}} 全名：{{getFullName()}} </div> <script> const vm = new Vue( { el: '#app', data: { firstName: '张', lastName: '三' }, methods: { getFullName() { console.log("getFullName方法被调用") return this.firstName+"-"+this.lastName } } } ) </script> </body> </html>
3. 计算属性实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>姓名案例</title> <script src="./js/vue.js"></script> </head> <body> <div id="app"> 姓：<input type="text" v-model="firstName"> <br><br> 名：<input type="text" v-model="lastName"> <br><br> 全名：{{fullName}} </div> <script> const vm = new Vue( { el: '#app', data: { firstName: '张', lastName: '三' }, computed: { fullName: { // 读取值 get() { return this.firstName+"-"+this.lastName }, // 修改 set( val ) { } } } } ) </script> </body> </html>
计算属性会进行缓存，数据没有更改不会调用计算属性中的get方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>姓名案例</title> <script src="./js/vue.js"></script> </head> <body> <div id="app"> 姓：<input type="text" v-model="firstName"> <br><br> 名：<input type="text" v-model="lastName"> <br><br> 全名：{{fullName}} 全名：{{fullName}} 全名：{{fullName}} 全名：{{fullName}} 全名：{{fullName}} </div> <script> const vm = new Vue( { el: '#app', data: { firstName: '张', lastName: '三' }, computed: { fullName: { // 读取值 get() { console.log("调用了fullName的get") return this.firstName+"-"+this.lastName }, // 修改 set( val ) { } } } } ) </script> </body> </html>
3.1 计算属性简写
计算属性只获取值，不进行值的修改
computed: { fullName:function() { console.log("调用了fullName的get") return this.firstName+"-"+this.lastName } }
computed: { fullName() { console.log("调用了fullName的get") return this.firstName+"-"+this.lastName } }
