VUE条件&循环

条件渲染

通过条件指令可以控制元素的显示及隐藏，或者说叫做创建和销毁

v-if

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

可以通过该指令动态的控制页面上显示的元素或进行某些属性的切换

<div v-cloak id="container">
    <h3 v-if="h3">h3标题</h3>

    <p v-if="gender === 'girl'">你是女的</p>
    <p v-else-if="gender === 'boy'">你是男的</p>
    <p v-else>不男不女</p>
</div>

var vm = new Vue({
    el: "#container",
    data:{
        h3:false,
        gender: 'other'
    },

})

truthy和ture的区别: 隐含有true属性的变量不可以认为它是true，它不是boolean类型

v-show

与v-if不同的是，v-show 的元素始终会被渲染并保留在DOM中，v-show 只是简单地切换元素的CSS属性 display:none

<div v-cloak id="container">
    <h3 v-if="oh3">h3标题</h3>
    <h4 v-show="oh4">h4标题</h4>
</div>

var vm = new Vue({
    el: "#container",
    data:{
        oh3:"1", // 
        oh4:"1", //
    },
})

v-if在该变量不为真时直接消失在document中，v-show 处理不为真的变量条件，绑定元素不会消失

选项卡

通过变量choicId控制当前选择的选项卡

var vm = new Vue({
    el: "#container",
    data: {
        choicId: null,
    }
})

这是一些根据choicId条件渲染的元素

<div v-cloak id="container">   
    <ol list>
        <li @click="choicId = 1">A</li>
        <li @click="choicId = 2">B</li>
        <li @click="choicId = 3">C</li>
        <li @click="choicId = 4">D</li>
    </ol>
    <p v-show="choicId == 1">aaaaaaaaaa</p>
    <p v-show="choicId == 2">bbbbbbbbbb</p>
    <p v-show="choicId == 3">cccccccccc</p>
    <p v-show="choicId == 4">dddddddddd</p>
</div>

可以让他们好看一些，加一些样式

li{
    list-style-type: none;
    border: 3px outset lightgreen;
    width: 100px;
    background:lightblue;
    margin:5px;
}
li:hover{
    border: 3px inset gray;
    cursor: pointer;
}
[v-cloak]{
    display: none;
}

js中两个等号和三个等号的复习:

==: 如果两边值的类型不同的时候，是要先先进行类型转换后，才能做比较；equality等同

===: 不需要做类型转换，如果两边值的类型不同，就表示一定是不等的identity恒等

循环渲染

v-for

使用v-for指令可以遍历类似数组这样的序列数据类型

v-for指令需要使用item in items形式的特殊语法，items是源数据数组并且 item是数组元素迭代的别名

<ol id="container">
    <li v-for="user in users">
        <span>{{ user.name }}</span>
    </li>
</ol>

var vm = new Vue({
    el: "#container",
    data:{
        users: [
            {name:"张三",age:18},
            {name:"李四",age:20},
            {name:"王五",age:19},
        ]
    },
})

索引遍历

v-for还可以支持将当前循环索引作为渲染时的第二个参数，第二个参数为访问索引位置

经常在开发小程序时，你会看到这样的写法

<p  v-for="(user,index) in users">
    {{ index }}:{{ user.age }}
</p>

data:{
    users: [
        {name:"张三",age:18},
        {name:"李四",age:20},
        {name:"王五",age:19},
    ]
},
    

对象遍历

使用v-for迭代访问一个对象

<p v-for="key in myself"> 
    {{ key }}
    <!-- 当v-for渲染时只有一个参数，此时参数为value值 -->
</p>

myself : {
    name:"赵六",
    age:"17",
}

对象索引遍历

v-for支持最多三个参数，同时获取遍历对象的key和value值，以及index索引位置

要注意的是，此时的key和value和python中的顺序是颠倒的，key在后，value在前

<p v-for="(value,key,index) in myself">
    {{ index }}: {{ key }} - {{ value }}
</p>

myself : {
    name:"孙七",
    age:"17",
}

无数据遍历

v-for进行一段取值，直接in一个数字即可，类似Python的range方法

<div>
    <p v-for="n in 8">
        {{ n }}
    </p>
    <!-- 1 2 3 4 5 6 7 8 -->
</div>

注意

Vue无法检测到对于数组的索引设置及长度修改以及对于对象属性的删除或添加

但是可以通过以下方式进行属性添加触发状态更新

Vue.set($vm.Object,"key","val") // 对于对象 这样的添加方式可以触发状态更新
Vue.set($vm.Array, index, newVal) // 对于数组 添加元素 触发状态更新
// vm.items.splice(newLength) // 设置数组长度

javascript.splice(where, num, [additem1,additem2...] )
// 删除或添加元素

当v-for与v-if同时使用时，v-for有更高的优先级，这会造成重复遍历得到的元素都要在做一次v-if的判断，如果我们是为了有目的判断当前是否需要渲染这个元素，或是跳过这个循环，可以将v-if放在外层元素，比如template标签中，(template标签无实际意义，默认不展示，但是可以起到包裹作用)