Vue条件渲染V-if及选项卡练习

前言

这几年一直在it行业里摸爬滚打，一路走来，不少总结了一些python行业里的高频面试，看到大部分初入行的新鲜血液，还在为各样的面试题答案或收录有各种困难问题

于是乎，我自己开发了一款面试宝典，希望能帮到大家，也希望有更多的Python新人真正加入从事到这个行业里，让python火不只是停留在广告上。

微信小程序搜索：Python面试宝典

或可关注原创个人博客：https://lienze.tech

也可关注微信公众号，不定时发送各类有趣猎奇的技术文章：Python编程学习

条件渲染

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

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恒等