Vue学习（三）循环遍历与表单绑定

最新推荐文章于 2024-08-21 15:38:24 发布

「已注销」

最新推荐文章于 2024-08-21 15:38:24 发布

阅读量2.4k

点赞数

分类专栏： Vue 文章标签： vue 前端 html5

本文链接：https://blog.youkuaiyun.com/qq_31755699/article/details/109530599

版权

Vue 专栏收录该内容

22 篇文章

订阅专栏

本文详细介绍了Vue中的v-for指令，包括如何遍历数组和对象，以及key值的重要作用。同时，文章讲解了v-model的使用，包括其基本用法、原理及修饰符的应用，通过实例展示了v-model如何实现表单数据的双向绑定。

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

v-for&v-model

Day1

前言

此文章根据官方文档及些网络资料编写，仅供个人使用。

提示：以下是本篇文章正文内容，下面案例可供参考

一、V-for

介绍：
V-for可遍历数据对象

1.遍历数组

格式：

<div v-for="(item, index) in items"></div>

简单的遍历数组
下面使用了Index索引值遍历

  <div id="app">
    <!--1.简单遍历-->
    <ul>
      <li v-for="item in names">{{item}}</li>
    </ul>
    <!--2.使用索引值-->
    <ul>
      <li v-for="(item, index) in names">
        {{index}}.{{item}}
      </li>
    </ul>
  </div>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        names: ['java', 'python', 'c', 'c++']
      }
    })
  </script>

在这里插入图片描述

2.遍历对象

格式：

<div v-for="(value, key) in object"></div>
<div v-for="(value, name, index) in object"></div>

实现：

  <div id="app">
    <h2>简单遍历</h2>
    <ul>
      <li v-for="item in message">{{item}}</li>
    </ul>
    <h2>获取value与key的遍历，value是值，key是属性</h2
    <ul>
      <li v-for="(value, key) in message">{{value}}-{{key}}</li>
    </ul>
    <h2>获取value与key与index的遍历，value是值，key是属性，index是索引值</h2>
    <ul>
      <li v-for="(value, key, index) in message">{{value}}-{{key}}-{{index}}</li>
    </ul>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: {
          name: 'Hello',
          age: 22,
          height: 175
        }
      }
    })
  </script>

结果：
在这里插入图片描述

3.Key值的作用

由于v-for的默认行为会导致当打算修改某一个元素的时候会重新排序，而不是移动他们，这就会很没有效率，所以Key就出现了。
在我们**真实DOM**渲染到**浏览器**上中间是有一个**虚拟DOM**环节的。
例如我们打算往浏览器上渲染一个列表：A，B，C，D。
那么在虚拟DOM里面是：

li1→A
li2→B
li3→C
li4→D

现在我们打算在B和C中间加个E节点
在未使用Key时：
他从Li3开始，原本Li3→C的，他直接改为Li3→E。

而Li4是→C，他重新绑定了，这样做很没有效率

li1→A
li2→B
li3→E
li4→C
li5→D

有key绑定时：
当你想插入一个E时，会先把与key一一绑定的值先展示出来，最后在插入。

如下面所示，li1对应A，li3对应C，而新插入的E是对应新的li5。

li1→A
li2→B
li5→E
li3→C
li4→D

实现：

  <div id="app">
    <ul>
      <li v-for="item in arry" :key="item">{{item}}</li>
    </ul>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        arry: ['A', 'B', 'C', 'D']
      }
    })
  </script>

二、V-model

表单绑定，实现双向绑定。

1.简单使用

我们会发现当你在输入框中输入任意数据的时候，message也会跟着发生改变。

  <div id="app">
    <input type="text" v-model="message">
    {{message}}
  </div>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'Hello World!'
      }
    })
  </script>

在这里插入图片描述

2.V-model的原理

通过刚刚的案例，我们可以得出v-model其实是双向绑定的。
而我们通过v-bind与v-on也可以实现v-model的双向绑定。

首先我们先通过v-bind与message的值绑定→在使用v-on动态获取input输入的值→然后我们使用event事件获取到我们刚刚输入的值返回给message

  <div id="app">
  <div id="app">
    <input type="text" :value="message" @input="valueChange">
    <br>
    <input type="text" :value="message" @input="message = $event.target.value">
    <h2>{{message}}</h2>
  </div>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好啊'
      },
      methods: {
        valueChange(event) {
          this.message = event.target.value;
        }
      }
    })
  </script>

3.V-model的修饰符

V-model.lazy，修饰符，当敲回车或者失去焦点的时候才绑定
V-model.number，一般返回的是字符，强转为数字
V.model.trim，过滤掉头尾的空格

2.V-model的小案例

单选框，radio，for的作用是当你点击文字的时候也可以选中

  <div id="app">
    <label for="male">
      <input type="radio" id="male" value="男" v-model="sex">男
    </label>
    <label for="female">
      <input type="radio" id="female" value="女" v-model="sex">女
    </label>
    <h2>{{sex}}</h2>
  </div>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        sex: '男'
      }
    })
  </script>

多选框，checkbox，

  <div id="app">
    <label v-for="item in allHobbies" :for="item">
      <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
    </label>
    <h2>您的爱好是: {{hobbies}}</h2>
  </div>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        hobbies: [], // 多选框,
        allHobbies: ['篮球', '足球', '乒乓球', '羽毛球', '台球', '高尔夫球']
      }
    })
  </script>

在这里插入图片描述

多选菜单，select，加上multiple时可以按住Ctrl键多选

  <div id="app">
    <select name="textSel" v-model="Langue" multiple>
      <option value="java">java</option>
      <option value="python">python</option>
      <option value="html5">html5</option>
    </select>
    <h2>语言: {{Langue}}</h2>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        Lang: 'python',
        Langue: []
      }
    })
  </script>