vue常用指令(v-for)

一、v-for 指令

  • 作用:
    • 根据数据生成列表结构

二、代码演示

1、在li标签中获取数组元素

  1. 代码

    js 复制代码
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
      </head>
      <body>
        <div id="app">
          <ul>
            <!-- 在li标签中获取数组元素 -->
            <li v-for="(item, index) in arr">{{index+1}}.动物:{{item}}</li>
          </ul>
        </div>
      </body>
    
      <script src="js/vue.min.js"></script>
      <script>
        var Vm = new Vue({
          el: "#app",
          data: {
            //普通数组
            arr: ["猫", "狗", "长颈鹿"],
          },
          methods: {},
        });
      </script>
    </html>
  2. 测试结果:

2、v-for 结合 v-bind一起使用,显示对象

  1. 修改代码

    js 复制代码
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
      </head>
      <body>
        <div id="app">
          <ul>
            <!-- 在li标签中获取数组元素 -->
            <li v-for="(item, index) in arr">{{index+1}}.动物:{{item}}</li>
          </ul>
    
          <br />
    
          <!-- v-for 结合 v-bind一起使用,显示对象 -->
          <h2 v-for="p in objArr" v-bind:title="p.age">{{p.name}}</h2>
        </div>
      </body>
    
      <script src="js/vue.min.js"></script>
      <script>
        var Vm = new Vue({
          el: "#app",
          data: {
            //普通数组
            arr: ["猫", "狗", "长颈鹿"],
            objArr: [
              { name: "张三", age: 18 },
              { name: "李四", age: 20 },
            ],
          },
          methods: {},
        });
      </script>
    </html>
  2. 测试结果

3、数组的添加和减少

  1. 代码修改

    js 复制代码
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
      </head>
      <body>
        <div id="app">
          <ul>
            <!-- 在li标签中获取数组元素 -->
            <li v-for="(item, index) in arr">{{index+1}}.动物:{{item}}</li>
          </ul>
    
          <br />
    
          <!-- v-for 结合 v-bind一起使用,显示对象 -->
          <input type="button" value="增加" @click="add" />
          <input type="button" value="减少" @click="remove" />
          <h2 v-for="p in objArr" v-bind:title="p.age">{{p.name}}</h2>
        </div>
      </body>
    
      <script src="js/vue.min.js"></script>
      <script>
        var Vm = new Vue({
          el: "#app",
          data: {
            //普通数组
            arr: ["猫", "狗", "长颈鹿"],
            objArr: [
              { name: "张三", age: 18 },
              { name: "李四", age: 20 },
            ],
          },
          methods: {
            add: function () {
              this.objArr.push({ name: "钱七", age: 38 });
            },
            remove: function () {
              this.objArr.shift();
            },
          },
        });
      </script>
    </html>

    数组的长度变化,会同步更新到页面上 , 是响应式的。

相关推荐
莫空0000几秒前
深入理解JavaScript属性描述符:从数据属性到存取器属性
前端·面试
guojl1 分钟前
深度剖析Kafka读写机制
前端
FogLetter2 分钟前
图片懒加载:让网页飞起来的魔法技巧 ✨
前端·javascript·css
Mxuan2 分钟前
vscode webview 插件开发(精装篇)
前端
Mxuan3 分钟前
vscode webview 插件开发(交付篇)
前端
Mxuan5 分钟前
vscode 插件与 electron 应用跳转网页进行登录的实践
前端
拾光拾趣录5 分钟前
JavaScript 加载对浏览器渲染的影响
前端·javascript·浏览器
Codebee5 分钟前
OneCode图表配置速查手册
大数据·前端·数据可视化
然我6 分钟前
React 开发通关指南:用 HTML 的思维写 JS🚀🚀
前端·react.js·html
Mxuan7 分钟前
vscode webview 插件开发(毛坯篇)
前端