条件渲染

最新推荐文章于 2024-05-26 20:29:43 发布

_XinXinM_

最新推荐文章于 2024-05-26 20:29:43 发布

阅读量396

点赞数

本文链接：https://blog.csdn.net/binbinhxx/article/details/112159662

版权

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回truthy值的时候被渲染。
v-show VS v-if

v-show通过css属性display控制元素显示，元素总是存在
v-if惰性渲染元素，若一开始条件为falsy，元素不存在

        <p v-if = "courses.length == 0 ">没有任何课程信息</p>

        <div class="course-list" v-else>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <script src="vue.js"></script>
    <style>
        .active{
            background-color: #ddd;
        }
    </style>
</head>
<body>
    <!-- 宿主文件 -->
    <!-- {{ mustache }}是一个动态的值 左右就用双括号{{}}-->
    <!-- 插值文本 -->
    <!-- v-once执行一次性插值 之后值变了动态值不变 -->
    <div id= "app">
        <h2 :title="title">
            {{ title }}    
        </h2>
        <!-- 用户输入 -->
        <!-- 键盘按下事件v-on：keydown -->
        <p><input type="text" v-model = "course" v-on:keydown.enter = "addCourse">{{course}}</p>
        <button @click = "addCourse">新增</button>
        <!-- 条件渲染 -->
        <!-- v-if 和 v-for最好不要放在一个标签上他们有优先级的不同会争抢 -->
        <p v-if = "courses.length == 0 ">没有任何课程信息</p>
        <div class="course-list" v-else>
            <div 
          v-for="c in courses" 
          :key="c"
          :class = "{active: selectedCourse === c}"
          @click = "selectedCourse = c"> 
            {{ c }}
        </div>
        </div>
        <!-- 列表渲染 --> 
        <!-- 被选中点击一个动态的类 没有被选中类被移除掉-->
        <!-- transparent 没有颜色透明色 -->
        
        <!-- <div 
        v-for="c in courses" 
        :key="c"
        :style = "{backgroundColor: selectedCourse === c ? '#' : 'transparent'}"
        @click = "selectedCourse = c"> 
          {{ c }}
      </div> -->
    <script>
        // 1.创建vue实例
        // 保存vue实例
        const app = new Vue({
            // 交代宿主是谁
            el:"#app",
            data: {
                title: '课程：',
                course:"",
                selectedCourse:'',
                courses:[],
                // courses:["黄帝内经","仲景心法","针灸","伤寒","金匮"],
            },
            methods: {
                addCourse() {
                    // 1.添加course到数组
                    this.courses.push(this.course)
                    // 2.清空course
                    this.course = ""

                }
            },
        })
        
    </script>
</body>
</html>

在这里插入图片描述

_XinXinM_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
条件渲染

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回truthy值的时候被渲染。v-show VS v-ifv-show通过css属性display控制元素显示，元素总是存在v-if惰性渲染元素，若一开始条件为falsy，元素不存在 <p v-if = "courses.length == 0 ">没有任何课程信息</p> <div class="course-list" v-else><!DO
复制链接

扫一扫

条件渲染

“相关推荐”对你有帮助么？