Vue2.5入门——v-if，v-show与v-for指令

最新推荐文章于 2024-08-07 23:10:41 发布

前台端茶工程师

最新推荐文章于 2024-08-07 23:10:41 发布

阅读量1.4k

点赞数

分类专栏： Vue2.5入门

本文链接：https://blog.csdn.net/qq_33930360/article/details/82080488

版权

Vue2.5入门专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
   <div id="root">
       <!--判断命令v-if(控制dom的存在与否)-->
       <!--当show对应的数据项是false的时候，直接把标签移除-->
       <div v-if="show">hello world</div>

       <!--v-show 控制dom的显示与否-->
       <!--但show的数据项是false的时候，不会移除，只是在当前标签新增一个display:none的属性-->
       <div v-show="show">hello world</div>

       <!--多次使用建议使用v-show，保证性能。只使用一两次则用v-if-->

       <!--绑定click事件-->
       <button @click="handleClick">toggle</button>

       <!--v-for 控制一组数据，通过这组数据循环显示页面项的dom结构-->
       <!--v-for(循环内容的展示)，当你有一个数据需要循环展示的时候，它会把你的数据做循环，循环展示list标签-->
       <ul>
           <!--循环list的数据项-->
           <!--循环list的时候，把item输出出来-->
           <!--:key,提升每一项的性能，每一项key的值不能相同-->
           <li v-for="item of list" :key="item">{{item}}</li>
           <!--另一种写法,缺点是需要排序的时候index会出现问题-->
           <li v-for="(item,index) of list" :key="index">{{item}}</li>
       </ul>
   </div>

   <script>
       new Vue({
           el:"#root",
           data:{
               // show的值是真则显示，假则隐藏
               show:true,
               // 列表数组
               list:[1,2,3]
           },
           // 方法
           methods:{
               // 每次点击都让show值取反
               handleClick:function () {
                   this.show=!this.show
               }
           }
       })
   </script>
</body>
</html>