Vue复习（2）

Style绑定
直接绑定到一个样式对象通常更好，这会让模板更清晰，同样的，对象语法常常结合返回对象的计算属性使用

在JavaScript中，Truthy(真值)指的是在Boolean上下文中转换后的值为真的值。所有值都是真值，除非它们被定义为 falsy (即， 除了false，0，“”，null，undefined和NaN 外)。
JavaScript 在Boolean上下文中使用强制类型转换（coercion）。

条件渲染
v-if
v-else-if
v-else
判断vue.js的变量的值，然后执行页面渲染逻辑。

<h1 v-if="result == 0">成绩未公布</h1>
<h1 v-else-if="result < 60">{{result}}分 - 考试不及格</h1>
<h1 v-else-if="result < 80">{{result}}分 - 还需努力</h1>
<h1 v-else>{{result}}分 - 考得不错，玩游戏吧！</h1>
<button @click="btnClick">考试成绩</button>

var app = new Vue({
    el:'#app',
    data: {
        result: 0,
    },
    methods: {
    btnClick: function(){
        this.result = Math.round(Math.random() * 100);
     },
   },
});  

虚拟DOM，四个h1每次只渲染一个，动态渲染，方便高效