Vue学习（五）——v-if,v-show,v-for指令

最新推荐文章于 2023-09-24 14:37:42 发布

Bambi12

最新推荐文章于 2023-09-24 14:37:42 发布

阅读量248

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/Bambi12/article/details/83900981

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>v-if,v-show,v-for指令</title>
   <script src="./vue.js"></script>
</head>
<body>
   <div id="root">

    <!-- v-if 如果给定值为true则显示，否则会删除dom元素-->
    <!-- v-show 如果给定值为true则显示，否则添加display: none;的样式  频率更大的时候,选择更好-->
    <!-- v-for 循环 添加key属性，提高性能，值也可以为item，key值不可以相同-->

    <div v-show="show">hello world</div>
    <button @click="handleClick">toggle</button>

    <ul>
       <li v-for="(item,index) in list" :key="index">{{item}}</li>
    </ul>

   </div>

   <script>
    new Vue({
     el:"#root", 
     data:{
     	show:true,
     	list:[1,2,3]
      },
      methods:{
        handleClick:function(){
           this.show=!this.show;
        }
     }
  })
   </script>
</body>
</html>

注：学习笔记内容来自：https://www.imooc.com/learn/980
官网：cn.vuejs.org