Vue学习开始走向VUE开发5---条件渲染详解

最新推荐文章于 2024-07-26 23:35:56 发布

jifukui

最新推荐文章于 2024-07-26 23:35:56 发布

阅读量119

点赞数

分类专栏： Vue开发文章标签： Vue 源代码条件渲染

本文链接：https://blog.csdn.net/jifukui/article/details/103381717

版权

Vue开发专栏收录该内容

9 篇文章 0 订阅

订阅专栏

这一节我们来讲条件渲染，单独讲解条件渲染可能比较单调和简单，这里我添加了v-for的组合使用。

条件渲染主要有v-if，v-else-if,v-else,v-show。

v-if后面接的表达式需要指明结果是真还是假，当条件为真时渲染v-if所在标签的内容，当条件为假是不渲染v-if所在标签的内容。

v-else-if后面接的表达式指明结果为真还是假，当条件为真时渲染v-else-if所在标签的内容，当条件为假是不渲染v-else-if所在标签的内容。

v-else是当上述的条件都不成立时，渲染v-else标签内的内容。

v-show后面接的表达式需要指明结果为真还是假，当结果为真时显示v-show所在标签内的内容，当为假时隐藏v-show所在标签内的内容。

v-for可以批量的处理一些数据上具有相同结构的数据。

概念上的东西先将这多，来点干货让大家感受一下。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<script src="https://cdn.bootcss.com/vue/2.6.2/vue.min.js"></script>
</head>
<body>
<div id="test">
    <div v-for="item in data">
        <div v-show="!item.hide" >id is {{item.id}}
            <input type="text" v-model="item.id">
            <input type="text" v-model="item.name">
            <input type="text" v-model="item.age">
            <input type="radio" v-if="item.sex==='male'">
            <input type="checkbox" v-else-if="item.sex==='female'">
            <input type="button" v-else>
        </div>
    </div>
</div>
 
<script>
var value=0;
var vm = new Vue({  
        el: '#test',  
        data: {  
            data:[
                {
                    id:1,
                    name:"first",
                    age:15,
                    sex:"male",
                    hide:false
                },
                {
                    id:2,
                    name:"second",
                    age:19,
                    sex:"female",
                    hide:false
                },
                {
                    id:3,
                    name:"third",
                    age:20,
                    sex:"",
                    hide:false
                },
                {
                    id:4,
                    name:"fourth",
                    age:24,
                    sex:"male",
                    hide:true
                }
            ]
        },
    });  
</script>
</body>
</html>