现在有一个需求,输入姓和名将其拼接为全名,全名要求根据姓名实时变化。
下面是三种实现:
1.插值语法实现
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>姓名案例-插值语法实现</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> 姓:<input type="text" v-model="firstName"><br> 名:<input type="text" v-model="lastName"><br> 全名:<span>{{firstName}}-{{lastName}}</span> </div> <script type="text/javascript"> const vm = new Vue({ el: "#root", data: { firstName: "", lastName: "" } }) </script> </body> </html>
插值语法可以实现所需要的功能,但是当需要更加复杂时,插值语法中的表达式就会变得十分冗余。
2.methods实现
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>姓名案例-methods实现</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> 姓:<input type="text" v-model="firstName"><br> 名:<input type="text" v-model="lastName"><br> 全名:<span>{{fullName()}}</span> </div> <script type="text/javascript"> const vm = new Vue({ el: "#root", data: { firstName: "", lastName: "" }, methods: { fullName() { return this.firstName + "-" + this.lastName } } }) </script> </body> </html>
使用methods实现,将插值语法的表达式转化为一个方法,模板中直接对方法进行调用,但是其他地方的数据变化,Vue模板刷新,会重复调用函数,进行计算。
3.计算属性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>姓名案例-计算属性实现</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <!-- 计算属性 1.什么是计算属性? 计算属性就是将Vue中的属性经过计算后得到的新的属性,计算属性会直接出现在vm上 2.计算属性的原理 底层借助了Object.defineProperty中的getter和setter 3.get函数什么时候执行? a.计算属性被初次调用时 b.计算属性所依赖的属性发生改动时 4.计算属性对比methods的优势 计算属性内部有缓存机制,能够实现复用,效率更高 --> <body> <div id="root"> 姓:<input type="text" v-model="firstName"><br> 名:<input type="text" v-model="lastName"><br> 全名:<span>{{fullName}}</span> </div> </body> <script> const vm = new Vue({ el: "#root", data: { firstName: "", lastName: "" }, // //完整写法,setter非必要,如果没有修改的需求,setter可以省略 // computed: { // fullName: { // get() { // return this.firstName + "-" + this.lastName // }, // set(value) { // const arr = value.split("-") // this.firstName = arr[0] // this.lastName = arr[1] // } // } // } //省略写法,省略写法地前提是不需要setter computed: { fullName() { return this.firstName + "-" + this.lastName } } }) </script> </html>
计算属性的缓存机制解决了模板刷新时重复计算的问题,只有当计算属性所依赖的属性发生变化时,才会进行重新的计算。
标签:Vue,firstName,插值,lastName,计算,fullName,属性 From: https://www.cnblogs.com/jmsstudy/p/17506651.html