Vue_v-if_条件不成立_标签不显示 

<!--@description-->
<!--@author beyondx-->
<!--@date Created in 2022/08/12/ 10:43-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="container">
        {{code}} <br>
        从vm中获取的数据为 {{str}}
        {{stu.stuNum}}<br>
        {{stu.stuName}}<br>
        {{stu.stuGender}}<br>
        <!-- v-if条件 -->
        <!-- v-if可以直接从 data 中取值 -->
        <label v-if="stu.stuGender == 'M' ">男</label><br>
        <label v-if="stu.stuGender == 'F' ">女</label>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el: '#container', // el 和 html绑定
            data: { // data又是一个 json; data代表一个数据结构; 里面可以放数据; 可以理解为 map
                code: 101,
                str: "从前有座山",
                stu: {
                    stuNum: "100001",
                    stuName: "张三",
                    stuGender: "M",
                    stuAge: 20
                }
            }
        });
    </script>
</body>
</html>

在这里插入图片描述
Vue_v-if_条件不成立_标签不显示
这个 和 Thymeleaf 类似

是不显示, 而不是 隐藏

时间告诉自己, 学的内容, 不用, 就会忘记, 那么就留下些痕迹

posted on 2022-08-12 14:46  beyondx  阅读(307)  评论(0)  编辑  收藏  举报

导航