vue的v-for、v-model、v-bind的基本使用

最新推荐文章于 2026-04-12 15:21:57 发布

原创最新推荐文章于 2026-04-12 15:21:57 发布 · 1.5k 阅读

23 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

本文介绍了Vue.js中的v-for指令用于数组和对象循环，v-model实现双向数据绑定，以及v-bind用于动态绑定组件属性。重点讲解了v-model在表单交互中的应用和v-bind的不同用法，包括简写形式和动态绑定。

v-for

定义vue数组

vue循环数组

vue循环对象

效果

v-modelde介绍

v-bind的介绍

定义vue数据

    data: {
               //数组
                arr2: [{
                    title: '星期一'
                }, {
                    title: '星期二'
                }, {
                    title: '星期三'
                }],
                 //对象
                area: {
                    "A": ["安阳", "安徽"],
                    "B": ["北京", "保定"],
                    "C": ["长安", "长沙"]
                },
               
            },

vue循环数组

v-for循环数

 // v-for循环数组的时候有两个参数 第一个是数组项(表示数组中的每一项) 第二个是索引值 也叫下标 
 <div v-for="(item, index) in arr2">{{item}} ---- {{index}}</div>

组的时候有两个参数第一个是数组项(表示数组中的每一项) 第二个是索引值也叫下标

vue循环对象

v-for循环对象的时候有三个参数第一个是键值对的值（value）第二个是键值对的键（key）第三个是下标

      // v-for循环对象的时候有三个参数 第一个是键值对的值（value）
      // 第二个是键值对的键（key）第三个是下标 (index)
 
       <div v-for="(value, key, index) in area">
            <h3>{{key}} ---- {{index}}</h3>
            <ul>
                <li v-for="item in value">{{item}}</li>//因为value是数组所以要再次循环
            </ul>
        </div>

效果

v-model的介绍

v-model是什么？

v-model 是Vue框架的一种内置的API指令，本质是一种语法糖写法。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理

为什么使用v-model？

v-model指令可以在表单input、textarea以及select元素上创建双向数据绑定它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model 本质上不过是语法糖，它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理

什么场景下会使用v-model？

表单提交是开发中非常常见的功能，也是和用户交互的重要手段：比如用户在登录、注册时需要提交账号密码；比如用户在检索、创建、更新信息时，需要提交一些数据；这些都要求我们可以在代码逻辑中获取到用户提交的数据，我们通常会使用v-model指令来完成

v-model的基本使用

它会根据控件类型自动选取正确的方法来更新元素；尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件来更新数据，并在某种极端场景，下进行一些特殊处理:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>model双向绑定</title>
</head>
<body>
    <div id="app">
        <h1>{{message}}</h1>
        <input type="text" v-model="message">
        <!--  下面这种也能实现
        input属性是每输入一次它响应一次，$event.target.value这个是获取输入的值--！> -->
        <!-- <input type="text" :value="message" @input="message = $event.target.value">  -->
    </div>
    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: "nb"
            }
        })
    </script>
</body>
</html>

效果

v-model修饰符的使用

目前我们在前面的案例中大部分的值都是在template中固定好的：
比如gender的两个输入框值male、female；比如hobbies的三个输入框值basketball、football、tennis；
在真实开发中，我们的数据可能是来自服务器的，那么我们就可以先将值请求下来，绑定到data返回的对象中，再通过v-bind来进行值的绑定，这个过程就是值绑定。
这里不再给出具体的做法，因为还是v-bind的使用过程。
v-model修饰符 - lazy
lazy修饰符是什么作用呢？
默认情况下，v-model在进行双向绑定时，绑定的是input事件，那么会在每次内容输入后就将最新的值和绑定的属性进行同步；
如果我们在v-model后跟上lazy修饰符，那么会将绑定的事件切换为 change 事件，只有在提交时（比如回车）才会触发

<!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">
        <input type="text" v-model="message">
        <h1>{{message}}</h1>
        <!-- lazy当按enter键才会让model执行 -->
        <input type="text" v-model.lazy="message1">
        <h1>{{message1}}</h1>

        <input type="number" v-model="age">
        <h1>{{typeof age}}</h1>
        <!-- number 数字类型和转为数字类型-->
        <input type="number" v-model.number="age">
        <h1>{{typeof age}}</h1>

        <input type="text" v-model="name">
        <h1>{{name}}</h1>
        <!-- trim 去除左右两边空格-->
        <input type="text" v-model.trim="name1">
        <h1>{{name1}}</h1>
    </div>
    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: "你好呀！",
                message1: "你好呀！",
                age: 0,
                name: '           sss',
                name1: '           sss'
            }
        })
    </script>
</body>
</html>

效果

v-model的值绑定

<!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">
        <label v-for="item in hobbies">
            <input type="checkbox" :value="item" :id="item" v-model="myhobbies">{{item}}
        </label>
        <h1>您选择的爱好是：{{myhobbies}}</h1>
    </div>

    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                myhobbies: [],
                hobbies: ["篮球","排球","乒乓球","羽毛球","台球"]
            }
        })
    </script>
</body>
</html>

效果

v-bind的介绍

介绍

Vue.js中的v-bind指令是一种将组件的属性绑定到Vue实例的数据的方式。v-bind指令可以用于将任何组件属性绑定到Vue实例的数据上，例如class、style、属性等。v-bind指令允许我们动态地设置组件的属性，从而使组件更加灵活和可重用。

使用 v-bind 指令

v-bind指令可以用于将组件属性与Vue实例的数据绑定在一起。在以下示例中，我们将使用v-bind指令将一个组件的class属性绑定到Vue实例的数据上。

<div id="app">
  <h1 v-bind:class="myClass">这是一个标题</h1>
  <button @click="changeClass">改变样式</button>
</div>

var app = new Vue({
  el: '#app',
  data: {
    myClass: 'red'
  },
  methods: {
    changeClass: function() {
      this.myClass = 'blue';
    }
  }
});

在这个例子中，我们使用了v-bind指令将h1标签的class属性绑定到Vue实例的myClass属性上。这意味着当Vue实例的myClass属性发生变化时，h1标签的class属性也会相应地发生变化。

我们还使用了一个按钮来更改Vue实例的myClass属性。当按钮被点击时，changeClass方法将会被调用，它会将Vue实例的myClass属性设置为blue。

这个例子展示了如何使用v-bind指令将组件的属性与Vue实例的数据绑定在一起，从而使组件更加灵活和可重用。

使用简写形式的 v-bind 指令
v-bind指令可以使用简写形式进行使用，即通过添加一个前缀符号:，例如:class、:style等。这使得代码更加简洁和易于阅读。

以下是一个使用简写形式的v-bind指令的示例：

<div id="app">
  <h1 :class="myClass">这是一个标题</h1>
  <button @click="changeClass">改变样式</button>
</div>

var app = new Vue({
  el: '#app',
  data: {
    myClass: 'red'
  },
  methods: {
    changeClass: function() {
      this.myClass = 'blue';
    }
  }
});

在这个示例中，我们使用了简写形式的v-bind指令将h1标签的class属性绑定到Vue实例的myClass属性上。这个示例与之前的示例非常相似，唯一的区别是我们使用了简写形式的v-bind指令。

这个示例展示了如何使用简写形式的v-bind指令，从而使代码更加简洁和易于阅读。

使用 v-bind 绑定样式
v-bind指令可以用于将组件的style属性与Vue实例的数据绑定在一起。以下示例演示了如何使用v-bind指令绑定组件的样式。

<div id="app">
  <h1 :style="{ color: myColor }">这是一个标题</h1>
  <button @click="changeColor">改变颜色</button>
</div>

var app = new Vue({
  el: '#app',
  data: {
    myColor: 'red'
  },
  methods: {
    changeColor: function() {
      this.myColor = 'blue';
    }
  }
});

在这个示例中，我们使用了v-bind指令将h1标签的style属性绑定到Vue实例的myColor属性上。我们将style属性设置为一个对象，该对象包含一个键值对，其中键为color，值为Vue实例的myColor属性。因此，当Vue实例的myColor属性发生变化时，h1标签的color样式也会相应地发生变化。

我们还使用了一个按钮来更改Vue实例的myColor属性。当按钮被点击时，changeColor方法将会被调用，它会将Vue实例的myColor属性设置为blue。

这个示例展示了如何使用v-bind指令将组件的样式与Vue实例的数据绑定在一起，从而使组件更加灵活和可重用。

使用 v-bind 绑定属性
v-bind指令可以用于将组件的属性与Vue实例的数据绑定在一起。以下示例演示了如何使用v-bind指令绑定组件的属性。

<div id="app">
  <input type="text" :value="message">
  <button @click="changeMessage">改变消息</button>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  methods: {
    changeMessage: function() {
      this.message = 'Hello World!';
    }
  }
});

在这个示例中，我们使用了v-bind指令将input标签的value属性绑定到Vue实例的message属性上。这意味着当Vue实例的message属性发生变化时，input标签的value属性也会相应地发生变化。

我们还使用了一个按钮来更改Vue实例的message属性。当按钮被点击时，changeMessage方法将会被调用，它会将Vue实例的message属性设置为Hello World!。

这个示例展示了如何使用v-bind指令将组件的属性与Vue实例的数据绑定在一起，从而使组件更加灵活和可重用。

使用 v-bind 动态绑定属性和样式
v-bind指令可以用于动态地绑定组件的属性和样式。以下示例演示了如何使用v-bind指令动态绑定组件的属性和样式。

<div id="app">
  <h1 :class="{ red: isRed, bold: isBold }">这是一个标题</h1>
  <button @click="toggleRed">切换颜色</button>
  <button @click="toggleBold">切换粗体</button>
</div>

var app = new Vue({
  el: '#app',
  data: {
    isRed: true,
    isBold: false
  },
  methods: {
    toggleRed: function() {
      this.isRed = !this.isRed;
    },
    toggleBold: function() {
      this.isBold = !this.isBold;
    }
  }
});

在这个示例中，我们使用了v-bind指令将h1标签的class属性绑定到一个对象上。该对象包含两个键值对，其中键为red和bold，值为Vue实例的isRed和isBold属性。因此，当Vue实例的isRed或isBold属性发生变化时，h1标签的class属性也会相应地发生变化。

我们还使用了两个按钮来切换Vue实例的isRed和isBold属性。当按钮被点击时，toggleRed和toggleBold方法将会被调用，它们会将Vue实例的isRed和isBold属性切换为相反的值。

标签