vue分支结构

在实际的应用中，我们肯定会遇到通过用户操作，控制某些DOM结构的显示和隐藏的操作，这种操作我们在原来的js中时通过直接DOM来完成，在Vue中我们通过v-if或v-show指令来控制，那具体怎么使用呢？我们来具体看一下吧。

条件渲染指令单路分支渲染---- v-if 指令用于“条件性地”渲染一块内容

双路分支渲染---- v-if  v-else  ,v-else 元素必须"紧跟"在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别

多路分支渲染---- v-if v-else-if v-else-if v-else

1.1.1 单路分支渲染--v-if使用场景

• 多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素

• 进行两个视图之间的切换

<div id="app">
        <!--  判断是否加载，如果为真，就加载，否则不加载-->
        <span v-if="flag">
           如果flag为true则显示,false不显示!
        </span>
     <p v-if="isShow">海南三亚市考察调研</p>
</div>

<script>
    var vm = new Vue({
        el:"#app",
        data:{
            flag:true,
            isShow:false
        }
    })
</script>

也可以使用v-if  v-else-if  v-else语句联合使用

<div v-if="type === 'A'">
       A
    </div>
  <!-- v-else-if紧跟在v-if或v-else-if之后   表示v-if条件不成立时执行-->
    <div v-else-if="type === 'B'">
       B
    </div>
    <div v-else-if="type === 'C'">
       C
    </div>
  <!-- v-else紧跟在v-if或v-else-if之后-->
    <div v-else>
       Not A/B/C
    </div>

<script>
    new Vue({
      el: '#app',
      data: {
        type: 'C'
      }
    })
</script>

1.1.2 v-if和v-show的区别

• v-show本质就是标签display设置为none，控制隐藏

  • v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。

• v-if是动态的向DOM树内添加或者删除DOM元素

  • v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件

1.1.3 双路分支渲染---- v-if  v-else

v-if  v-else

 <div id="app">
        <div>
            <p v-if="age>=18">小余是成年人</p>
            <p v-else>小余是未成年人</p>
        </div>
    </div>
    
    <script src="js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                age:19
            },
            methods:{
    
            }
        })
    </script>

注意：

v-else要紧挨着，v-if去写。否则会报错。

错误的写法如下所示：

  <div>
            <p v-if="age>=18">小余是成年人</p>
            <div>
                <p v-else>小余是未成年人</p>
            </div>    
        </div>

1.1.4 多路分支渲染---- v-if v-else-if v-else-if v-else

多路分支渲染---- v-if v-else-if v-else-if v-else

<div id="app">
            你的分数是：{{score}}
            <p v-if="score === 100">天才</p>
            <p v-else-if="score>=90 && score<100">优秀</p>
            <p v-else-if="score>=70 && score<90">良好</p>
            <p v-else-if="score>=60 && score<70">及格</p>
            <p v-else>不及格</p>
        </div>
    </div>
    
    <script src="js/vue.js"></script>
        <script>
            let vm = new Vue({
                el:'#app',
                    data:{
                        score:99
                    }
                })
        </script>

预览：

总结

vue的基本指令：文本渲染指令、属性渲染指令、样式渲染指令、表单渲染指令、条件渲染指令、列表渲染指令、事件渲染指令

文本渲染指令： {{ }}  v-text   v-html

属性渲染指令： v-bind:属性名   缩写   :属性名

样式渲染指令：  v-bind:class=""      v-bind:style=""     缩写      :class=""      :style=""  

表单渲染指令： v-model

条件渲染指令:  v-if      v-if  v-else   v-if v-else-if v-else-if v-else

列表渲染指令:  v-for  

事件渲染指令： v-on :click=""   @click=""