vue指令（v-for、v-if、v-show）

最新推荐文章于 2023-07-13 01:51:17 发布

qy220824

最新推荐文章于 2023-07-13 01:51:17 发布

阅读量273

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js 前端

本文链接：https://blog.youkuaiyun.com/qq_59185329/article/details/126961815

vue 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了Vue.js中常用的三个核心指令：v-for用于循环渲染数组、对象和数字；v-if用于条件性地渲染DOM元素；v-show则通过CSS属性控制元素的显示与隐藏。此外，还对比了v-if与v-show的不同之处。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、v-for

1、遍历数组 v-for=“(item,index) in arr”
2、遍历对象 v-for=“(value,key,index) in obj”
3、遍历数字 v-for=“num in 10”
4、key关键字提高重排顺序
只能是数字或字符串，必须是唯一的
v-for=(item,index) in arr:key=‘item.id’

<div id="app">
    数组
    <ul>
      <li v-for="(item,index) in arr":key='item.id'>{{index}}：{{item}}</li>
    </ul>
    对象
    <ul>
      <li v-for="(value,key,index) in obj":key='index'>{{key}}：{{value}}</li>
    </ul>
    数字
    <ul>
      <li v-for="num in 10">是{{num}}</li>
    </ul>
  </div>
</body>
</html>
<script>
  let vm = new Vue({
    el:"#app",
    data:{
      arr:[1,2,3,4,5,6],
      obj:{
        name:'小花',
        age:18,
        sex:'女',
      }
    },
    methods:{

    },
  })
</script>

2、v-if和v-show

v-if和v-show的区别：
v-if是删除dom元素，可以搭配v-else 和v-else-if使用
v-show是隐藏元素，通过display:none

<body>
  <div id="app">
    <button @click="change">点我</button>
    <p v-if="flag">我是v-if设置的元素</p>
    <p v-show="flag">我是v-show设置的元素</p>
    <p v-if="age > 18">成年</p>
    <p v-else>未成年</p>
    <p v-if="age < 18">青少年</p>
    <p v-else-if="age < 60">青年人</p>
    <p v-else>老人</p>
  </div>
</body>
<script>
  let vm = new Vue({
    el:"#app",
    data:{
      flag:false,
      age: 18
    },
    methods:{
      change(){
        this.flag = !this.flag;
      }
    }
  })
</script>