Vue—条件渲染与列表渲染

原创已于 2023-01-23 09:24:50 修改 · 200 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #前端 #javascript

于 2023-01-23 09:23:33 首次发布

Vue学习专栏收录该内容

63 篇文章

订阅专栏

文章介绍了Vue.js中用于条件渲染的v-if和v-show指令，包括它们的用法、适用场景及特点。v-if适用于切换频率低的情况，会移除DOM元素，而v-show则在切换频繁时更合适，仅使用样式隐藏元素。此外，文章还详细讲解了v-for指令，用于展示列表数据，可遍历数组、对象等，并强调了key属性的重要性。

条件渲染：

1.v-if

写法：

(1).v-if="表达式"

(2).v-else-if="表达式"

(3).v-else="表达式"

适用于：切换频率较低的场景。

特点：不展示的DOM元素直接被移除。

注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

2.v-show

写法：v-show="表达式"

适用于：切换频率较高的场景。

特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

3.备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到

<body>
    <div id="root">
        <!--使用v-show做条件渲染-->
        <!--其实只要是一个能得出结果的条件判断式就可以-->
        <!-- <h2 v-show="false">欢迎{{name}}</h2> -->
        <!--使用v-if做条件渲染-->
        <!--其实只要是一个能得出结果的条件判断式就可以-->
        <!-- <h2 v-if="false">欢迎{{name}}</h2> -->
        <h2>当前的n值是:{{n}}</h2>
        <button @click="n++">点我+1</button>
        <div v-show="n===1">Angular</div>
        <div v-show="n===2">React</div>
        <div v-show="n===3">Vue</div>
        <!--频率高的：v-if  频率低的：v-show-->
        <div v-if="n===1">Angular</div>
        <div v-else-if="n===2">React</div>
        <div v-else-if="n===3">Vue</div>
        <!--使用else不会逐行判断。也存在v-else，但是后面不需要跟条件-->
        
        <!--template可以包括三个标签，同时判断，且不会展示样式。但是只能跟v-if一起使用-->
        <template v-if="n===1">
            <h2>{{name}}</h2>
            <h2>{{name}}</h2>
            <h2>{{name}}</h2>
        </template>
    </div>
</body>


<script>
    new Vue({
        el:'#root',
        data:{
          n:0,
          name:'GUI'
        }
    })
</script>

v-for指令:

1.用于展示列表数据

2.语法：v-for="(item, index) in xxx":key="yyy"

3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少)

<body>
    <div id="root">
        <!--遍历数组是用的最多的-->
        <h2>列表</h2>
        <ul>
            <!--每个对象需要一个标识-->
            <!-- <li v-for="per in person" :key="per.id">
                {{per.name}}-{{per.age}}
            </li> -->
            <!--index也可以作为key值-->
            <!--in可以用of代替-->
            <li v-for="(per,index) in person" :key="index">
                {{per.name}}-{{per.age}}
            </li>
        </ul>

        <h2>汽车信息</h2>
        <ul>
            <li v-for="(value,key) of car" :key="key">
                {{key}}-{{value}}
            </li>
        </ul>

        <h2>遍历字符串</h2>
        <ul>
            <li v-for="(char,index) of str" :key="index">
                {{index}}-{{char}}
            </li>
        </ul>

        <h2>遍历指定次数</h2>
        <ul>
            <li v-for="(number,index) of 5" :key="index">
                {{index}}-{{number}}
            </li>
        </ul>
    </div>
</body>
<script>
    new Vue({
        el:'#root',
        data:{
          person:[
            {id:'001',name:'A',age:18},
            {id:'002',name:'B',age:19},
            {id:'003',name:'C',age:20}
          ],
          car:{
            name:'奥体',
            price:'70万',
            color:'黑色'
          },
          str:'hello'
        }
    })
</script>