Vue的列表渲染和双向绑定（初学vue之v-for以及v-model）

最新推荐文章于 2024-05-29 15:05:00 发布

码农白衣

最新推荐文章于 2024-05-29 15:05:00 发布

阅读量1.6k

点赞数 23

分类专栏：前端知识 Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_73916603/article/details/138131906

版权

前端知识同时被 2 个专栏收录

54 篇文章 0 订阅

订阅专栏

Vue

12 篇文章 0 订阅

订阅专栏

一、列表渲染（v-for）介绍：

1.概念

列表渲染是指将数据集合（通常是数组）中的每个数据项渲染成相应的 DOM 元素，通常用于显示列表、表格等内容。

2.好处

简化代码：通过列表渲染，可以轻松地将数据集合的每个元素渲染成 DOM 元素，减少重复的 HTML 代码。
动态更新：当数据集合发生变化时，Vue.js 可以智能地更新 DOM，保持视图与数据的同步。

3.作用

在 Vue.js 中，列表渲染允许开发者根据数据动态生成页面内容，使得页面能够根据数据的变化自动更新。

4.应用

显示商品列表
显示文章列表
渲染动态生成的菜单
显示用户列表等

5.用法

在 Vue.js 中，列表渲染通常使用 v-for 指令，语法为 v-for="item in items"，其中 item 是数组中的每个元素，items 是要遍历的数据集合。

二、双向绑定（v-model）介绍：

1.概念

双向绑定是指视图（DOM）与数据模型之间的双向关联，当数据模型发生变化时，视图会更新；反之亦然，当用户在视图中输入内容时，数据模型会相应地更新。

2.好处

实时更新：视图和数据模型之间的双向绑定使得数据的变化能够即时地反映在视图上，用户体验更加流畅。
减少手动操作：双向绑定可以减少开发者手动操作 DOM 的需求，简化开发流程。

3.作用

双向绑定使得视图与数据之间的交互更加自然和直观，提升了用户体验。

4.应用

表单输入与数据模型的绑定
页面状态的动态更新
实时数据展示等

5.用法

在 Vue.js 中，可以使用 v-model 指令实现双向绑定，它能够自动将输入元素的值与数据模型进行关联，使得数据的变化能够同步到视图上，以及视图中输入的值能够同步到数据模型中。

三、v-for和v-model具体用法

1.v-for的基本使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .item{
            margin-top: 10px;
            background-color: orange;
        }
        .item h3{
            color: red ;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 电影列表进行渲染 -->
        <h1>电影列表</h1>
        <ul>
            <li v-for="movie in movies">{{movie}}</li>
        </ul>

        <!-- 电影列表同时有索引 -->
        <ul>
            <li v-for="(movie, index) in movies">{{index}}--{{movie}}</li>
        </ul>
        
        <!-- 遍历数组复杂数据 -->
        <h2>商品列表</h2>
        <div class="item" v-for = "item in products">
            <h3>商品：{{item.name}}</h3>
            <span>价格：{{item.price}}</span>
            <p>秒杀：{{item.desc}}</p>
        </div>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            //data: option api
            data: function () {
                return {
                    // 1.movies
                    movies:["金手指","哆啦A梦","熊出没","喜羊羊与灰太狼","猪猪侠"],

                    //2.数组：存放的是对象
                    products:[
                        {id:100,name:"Macbook",price:9.9,desc:"9.9秒杀，快来抢购！"},
                        {id:101,name:"小米电脑",price:9.9,desc:"9.9秒杀，快来抢购！"},
                        {id:102,name:"拯救者Y9000P",price:9.9,desc:"9.9秒杀，快来抢购！"}
                    ]
                }
            },
        })
        app.mount("#app")
    </script>
</body>

</html>

2.v-for的其他类型

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .item{
            margin-top: 10px;
            background-color: orange;
        }
        .item h3{
            color: red ;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 遍历数组 -->

        <!-- 遍历对象 -->
        <ul>
            <li v-for = "(value,key,index) in info">{{value}}--{{key}}--{{index}}</li>
        </ul>

        <!--遍历字符串(iterable)-->
        <ul>
            <li v-for = "item in message">{{item}}</li>
        </ul>

        <!--遍历数字-->
        <ul>
            <li v-for = "num in 10">{{num}}</li>
        </ul>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            //data: option api
            data: function () {
                return {
                    movies:["金手指","哆啦A梦","熊出没","喜羊羊与灰太狼","猪猪侠"],
                    info:{name:"why",age:18,height:1.88},
                    message:"你好啊。Vue"
                }
            },
        })
        app.mount("#app")
    </script>
</body>

</html>

3.v-for的template

<!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">
        <!--如果div没有实际的意义，那么可以使用tempplate替换-->
        <div v-for = "(value,key,index) in infos">
            <span>{{value}}</span>
            <strong>{{key}}</strong>
            <i>{{index}}</i>
        </div>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            //data: option api
            data: function () {
                return {
                    infos:{name:"why",age:18,height:1.88}
                }
            },
        })
        app.mount("#app")
    </script>
</body>

</html>

4.数组更新的检查

<!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 v-for="item in names">{{item}}</li>
        </ul>
        <button @click = "changeArray">修改数组</button>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            //data: option api
            data: function () {
                return {
                    names:["abc","cba","mba"]
                }
            },
            methods:{
                changeArray(){
                //1.直接将数组修改为一个新的数组
                // this.names = ["why","kobe"]

                //2.通过一些数组方法修改数组中的元素
                // this.names.pop()
                // this,names.push("why")
                // this.names.splice(2,1,"why")
                // this.names.sort()
                // this,names.reverse()

                //3.不修改原数组的方法是不能侦听(watch)
                const newNames = this.names.map(item => item + 'whty')
                this.names = newNames
                }
            }
        })
        app.mount("#app")
    </script>
</body>

</html>

5.v-for中key属性

<!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 v-for="item in names">{{item}}</li>
        </ul>
        <button @click = "changeArray">修改数组</button>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            //data: option api
            data: function () {
                return {
                    names:["abc","cba","mba"]
                }
            },
            methods:{
                changeArray(){
                //1.直接将数组修改为一个新的数组
                // this.names = ["why","kobe"]

                //2.通过一些数组方法修改数组中的元素
                // this.names.pop()
                // this,names.push("why")
                // this.names.splice(2,1,"why")
                // this.names.sort()
                // this,names.reverse()

                //3.不修改原数组的方法是不能侦听(watch)
                const newNames = this.names.map(item => item + 'whty')
                this.names = newNames
                }
            }
        })
        app.mount("#app")
    </script>
</body>

</html>

6.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">
        <!--1.手动的实现了双向绑定-->
        <!-- <input type="text" :value="message" @input="inputChange"> -->

        <!--v-model实现双向绑定-->
        <label for="account">
            账号:<input type="text" id="account" v-model="account">
        </label>
        <label for="password">
            密码:<input id="password" type="password" v-model="password">
        </label>
        <button>登录</button>
        <h2>{{message}}</h2>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            //data: option api
            data: function () {
                return {
                    message: "Hello Model",
                    account: "",
                    password: ""
                }
            },
            methods: {
                inputChange(event) {
                    this.message = event.target.value
                },
                loginClick() {
                    const account = this.account
                    const password = this.password

                    //url发送网络请求


                }
            }
        })
        app.mount("#app")
    </script>
</body>

</html>

7.v-model绑定textarea

<!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">
        <textarea name="" id="" cols="30" rows="10" v-model="content"></textarea>
        <p>输入的内容：{{content}}</p>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            //data: option api
            data: function () {
                return {
                    content: ""
                }
            },
        })
        app.mount("#app")
    </script>
</body>

</html>

8.v-model绑定checkbox

<!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">
        <!--checkbox单选框:绑定到属性中的值是一个Boolean-->
        <label for="agree">
            <input id="agree" type="checkbox" v-model="isAgree">同意协议
        </label>

        <!--checkbox多选框-->
        <div class="hobbies">
            <h2>请选择你的爱好:</h2>
            <label for="sing">
                <input id="sing" type="checkbox" v-model="hobbies" value="sing">唱
            </label>
            <label for="jump">
                <input id="jump" type="checkbox" v-model="hobbies" value="jump">跳
            </label>
            <label for="rap">
                <input id="rap" type="checkbox" v-model="hobbies" value="rap">rap
            </label>
            <label for="basketball">
                <input id="basketball" type="checkbox" v-model="hobbies" value="basketball">篮球
            </label>
        </div>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            //data: option api
            data: function () {
                return {
                    isAgree: false,
                    hobbies: []
                }
            },
        })
        app.mount("#app")
    </script>
</body>

</html>

9.v-model绑定radio

<!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">
        <div class="gender">
            <label for="">
                <input id="male" type="radio" v-model="gender" value="male">男
            </label>
            <label for="">
                <input id="female" type="radio" v-model="gender" value="female">女
            </label>
            <h2>性别：{{gender}}</h2>
        </div>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            //data: option api
            data: function () {
                return {
                    gender: "female"
                }
            },
        })
        app.mount("#app")
    </script>
</body>

</html>

10.v-model绑定select

<!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">
        <!--select的单选-->
        <select name="" id="" v-model="fruit">
            <option value="apple">苹果</option>
            <option value="orange">橘子</option>
            <option value="banana">香蕉</option>
        </select>
        <h2>单选：{{fruit}}</h2>
        <hr>
        <!--select的复选-->
        <select name="" id=""  multiple size="3" v-model="fruits">
            <option value="apple">苹果</option>
            <option value="orange">橘子</option>
            <option value="banana">香蕉</option>
        </select>
        <h2>单选：{{fruits}}</h2>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            //data: option api
            data: function () {
                return {
                    fruit:"orange",
                    fruits:[]
                }
            },
        })
        app.mount("#app")
    </script>
</body>

</html>

11.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">
        <!--select的复选-->
        <select name="" id="" multiple size="3" v-model="fruits">
            <option v-for="item in allFruits" :key="item.value" :value="item.value">{{item.text}}</option>
        </select>
        <h2>多选：{{fruits}}</h2>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const app = Vue.createApp({
            //data: option api
            data: function () {
                return {
                    allFruits: [
                        { value: "apple", text: "苹果" },
                        { value: "orange", text: "橘子" },
                        { value: "banana", text: "香蕉" },
                    ],
                    fruits: []
                }
            },
        })
        app.mount("#app")
    </script>
</body>

</html>

四、实例应用

1.动态生成待办事项列表

HTML结构：

<div id="app">
  <h2>待办事项列表</h2>
  <input type="text" v-model="newTodo" @keyup.enter="addTodo">
  <ul>
    <li v-for="(todo, index) in todos" :key="index">
      {{ todo.text }}
      <button @click="removeTodo(index)">删除</button>
    </li>
  </ul>
</div>

js代码：

new Vue({
  el: '#app',
  data: {
    newTodo: '',
    todos: []
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim() !== '') {
        this.todos.push({ text: this.newTodo });
        this.newTodo = '';
      }
    },
    removeTodo(index) {
      this.todos.splice(index, 1);
    }
  }
});

我们使用了 v-model 指令来实现双向绑定，将输入框与 newTodo 数据属性关联起来。同时，我们通过 @keyup.enter 监听键盘事件，当用户按下 Enter 键时调用 addTodo 方法添加新的待办事项。通过 v-for 指令遍历 todos 数组，动态生成待办事项列表，并且为每个待办事项添加了删除按钮，点击按钮时调用 removeTodo 方法删除对应的待办事项。

2.计数器应用

使用 Vue.js 创建一个简单的计数器应用，用户可以增加或减少计数器的值。

HTML结构

<div id="app">
  <h2>计数器</h2>
  <button @click="decrement">减少</button>
  <span>{{ count }}</span>
  <button @click="increment">增加</button>
</div>

JS代码

new Vue({
  el: '#app',
  data: {
    count: 0
  },
  methods: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    }
  }
});

我们使用了 v-on 指令简写 @ 来监听按钮的点击事件，并且调用对应的方法进行增加或减少计数器的值。计数器的值保存在 count 数据属性中，通过插值语法 {{ count }} 实时显示在页面上。

码农白衣

关注

23
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
Vue的列表渲染和双向绑定（初学vue之v-for以及v-model）

列表渲染是指将数据集合（通常是数组）中的每个数据项渲染成相应的 DOM 元素，通常用于显示列表、表格等内容。双向绑定是指视图（DOM）与数据模型之间的双向关联，当数据模型发生变化时，视图会更新；反之亦然，当用户在视图中输入内容时，数据模型会相应地更新。
复制链接

扫一扫