前端学习-超强VUE教程04

沐果果

于 2020-07-10 18:23:38 发布

阅读量195

点赞数

CC 4.0 BY-SA版权

分类专栏：前端学习

本文链接：https://blog.csdn.net/qinjava/article/details/107140753

前端学习专栏收录该内容

23 篇文章

订阅专栏

本文通过一个实战案例，详细讲解了Vue.js中条件渲染的使用方法，包括v-if、v-else-if、v-else指令的应用场景及效果。通过按钮点击事件，动态控制元素的显示与隐藏，展示了列表渲染及不同条件下的元素替换。

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

vue 条件渲染

v-if练习案例

<!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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="box">
        <button @click="handleClick()">click</button>
        <div v-if="isCreated">动态创建和删除-11111</div>
        <div v-else="isCreated">动态创建和删除-22222</div>
        <ul v-if="datalist.length">
            <li v-for="data in datalist">
                    {{data}}
            </li>
        </ul>
        <ul v-else>
            购物车空开是也
        </ul>
        <div v-if="which===1">111</div>
        <div v-else-if="which===2">222</div>
        <div v-else>333</div>
    </div>

    <script type="text/javascript">
      var app = new Vue({
            el: '#box',
            data: {
                isCreated: false,
                datalist: [],
                which: 1
            },
            methods:{
                handleClick() {
                    this.isCreated=!this.isCreated
                    this.datalist= ["111","222"]
                }
            } 
        })
    </script>
</body>

</html>