Vue框架——分支结构

程序员陈_明勇

于 2021-02-12 21:38:10 发布

阅读量1.4k

点赞数 1

分类专栏： Vue框架学习文章标签： js vue.js 分支结构 v-show v-if

本文链接：https://blog.youkuaiyun.com/weixin_44604586/article/details/113797287

版权

Vue框架学习专栏收录该内容

15 篇文章

订阅专栏

本文介绍了Vue.js中的条件渲染指令，包括v-if、v-else-if、v-else的用法，通过案例展示了如何根据分数显示不同等级的成绩评价。同时，对比了v-if和v-show在控制元素显示上的区别，v-if会根据条件决定元素是否渲染，而v-show则是控制元素是否显示，但元素始终会被渲染到页面中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

分支结构

v-if
v-else-if
v-else
v-show

案例

<div id="app">
    <div v-if='score>=90'>成绩优秀</div>
    <div v-else-if='score>=80'>成绩良好</div>
    <div v-else-if='score>=60'>成绩合格</div>
    <div v-else>成绩较差</div>
    <div v-show='flag'>加油！</div>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            score: 90,
            flag: true
        }
    });
</script>

先判断score是否大于等于90，如果条件成立则显示div的内容，否则继续往下判断。

v-if 和 v-show 的区别

v-if控制元素是否渲染到页面中
v-show控制元素是否显示到页面中(元素已经渲染到了页面里)