Vue—v-for与v-model的使用_v-for v-model一起使用-优快云博客

本文介绍了Vue.js中的v-for指令用于循环渲染数组和对象的方法，并演示了如何利用v-model实现表单数据与Vue实例之间的双向绑定。此外，还探讨了MVVM架构下的数据绑定机制。

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

1.v-for结合实例使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <span>{{user.name}}{{user.age}}</span>
    <hr>
<!--    通过v-for遍历对象-->

<!--    <span v-for="u in user">-->
<!--        {{u}}//输出整个对象-->
<!--    </span>-->

<!--    <span v-for="(key,value,index) in user">-->
<!--        {{index}}:{{key}}:{{value}}-->
    <span v-for="(key,value) in user">
        {{value}}:{{key}}
    </span>
    <!--    通过v-for遍历数组
    :key="user.id"便于内部做重用和排序
    -->
    <hr>
<ul>
    <li v-for="a in list">{{a}}</li>
</ul>
    <hr>
    <ul>
        <li v-for="user,index in userlist" :key="user.id">
            {{index+1}}
            {{user.id}}
            {{user.name}}
            {{user.age}}
            {{user.aihao}}
        </li>
    </ul>
    <!--    通过v-for遍历数组中的对象-->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            user:{name:"小文",age:22},
            list:["广东","四川","成都"],
            userlist:[
                {id:1,name:"wenxin1",age:"18",aihao:"编程1"},
                {id:2,name:"wenxin2",age:"18",aihao:"编程2"},
                {id:3,name:"wenxin3",age:"18",aihao:"编程3"},
                {id:4,name:"wenxin4",age:"18",aihao:"编程4"},
                ]
        },
        methods: {}
    })
</script>
</body>
</html>
</html>```
2.v-model：用来绑定标签元素的值与vue实例对象中data数据保持一致，从而**实现双向数据绑定(表单中的数据导致vue实例data数据变化，vue实例data数据变化导致表单数据变化)**

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <input type="text" v-model="message">
    <hr>
    <span>{{message}}</span>
    <hr>
    <input type="button" value="点我改变data中message的值" @click="change">

</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            message:""
        },
        methods: {
            change(){
                this.message="wenwenwen"
            }

        }
    })
</script>
</body>
</html>