当要显示的数据需要复杂的处理的时候，一般会选择使用computed计算属性.
计算属性会进行缓存，当数据没有改变时，如果进行多次使用时，计算属性只会调用一次。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <h2>{{totalPrice}}</h2> </div> <script> let app = new Vue({ el: "#app", data: { books: [ {name: "数据结构", price: 12, count: 3}, {name: "汇编语言", price: 56, count: 3}, {name: "操作系统", price: 22, count: 3}, ] }, computed: { totalPrice() { return this.books.reduce(function(total, cur) { console.log(total, cur); return cur.price * cur.count + total; }, 0) } } }) </script> </body> </html>当通过methods中定义方法，以供@click调用时，需要注意参数问题： 情况一：如果该方法不需要额外参数，那么方法后的()可以不添加。 但是注意：如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去。 情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件。
当条件语句不成立时，浏览器根本不会对此标签以及它的子标签进行渲染，也就是说代码中根本不会出现相应的标签.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <span v-if="score >= 90">优秀</span> <span v-else-if="score >= 60">良好</span> <span v-else>及格</span> </div> <script> let app = new Vue({ el: "#app", data: { score: 87 } }) </script> </body> </html>