vue 里面的computed用法

最新推荐文章于 2023-12-17 08:00:00 发布

juneoer

最新推荐文章于 2023-12-17 08:00:00 发布

阅读量1k

点赞数

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>名称案例</title> <script src="../js/vue-2.4.0.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: { }, watch: { }, computed:{ // 在 computed 中，可以定义一些属性，这些属性，叫做【计算属性】，计算属性的，本质，就是一个方法，只不过，我们在使用这些计算属性的时候，是把它们的名称，直接当作属性来使用的；并不会把计算属性，当作方法去调用； // 注意1：计算属性，在引用的时候，一定不要加 () 去调用，直接把它当作普通属性去使用就好了； // 注意2：只要计算属性，这个 function 内部，所用到的任何 data 中的数据发送了变化，就会立即重新计算这个计算属性的值 // 注意3：计算属性的求值结果，会被缓存起来，方便下次直接使用；如果计算属性方法中，所以来的任何数据，都没有发生过变化，则，不会重新对计算属性求值； 'fullname':function () { return this.firstname+this.lastname; } } }) </script> </body> </html>