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每次只渲染一个,动态渲染,方便高效

你可能感兴趣的:(Vue复习(2))