13. 条件渲染

Vue.js教学

优酷频道 技术频道

条件渲染

知识点

  • v-if
  • v-else-if
  • v-else

v-if

判断vue.js的变量的值,然后执行页面渲染逻辑。(if-elseif-else)

<div id="myApp">
    <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>
</div>
<script>
    var myApp = new Vue({
        el: '#myApp', 
        data: {
            result: 0
        },
        methods: {
            btnClick: function(){
                this.result = Math.round(Math.random() * 100);
            },
        },
    });
</script>

源文件

小马视频频道

http://komavideo.com