菜单 搜索
首页 前端知识 Vue的列表渲染和双向绑定（初学vue之v-for以及v-model）

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

2024-07-29 00:07:58 前端知识 前端哥 937 995 我要收藏

目录

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

1.概念

2.好处

3.作用

4.应用

5.用法

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

1.概念

2.好处

3.作用

4.应用

5.用法

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

1.v-for的基本使用

2.v-for的其他类型

3.v-for的template

4.数组更新的检查

5.v-for中key属性

6.v-model的基本使用

7.v-model绑定textarea

8.v-model绑定checkbox

9.v-model绑定radio

10.v-model绑定select

11.v-model的值绑定

四、实例应用

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

2.计数器应用

一、列表渲染（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 }} 实时显示在页面上。

转载请注明出处或者链接地址：https://www.qianduange.cn//article/14518.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

解决：Uncaught (in promise) SyntaxError: “[object Object]“ is not valid JSON 问题的过程

2024-08-10 22:08:13

Unity数据持久化之Json

2024-08-10 22:08:00

simdjson 高性能JSON解析C 库

2024-08-10 22:08:00

气象数据NC、grb2解析成矢量json、CMIS、MICPS及图片应用到webgis

2024-08-10 22:08:07

echarts bug:Invalid geoJson formatCannot read properties of undefined (reading ‘length‘)

2024-08-10 22:08:01

【无标题】QT json 序列化反序列化

2024-08-10 22:08:00

JSON.toJSONString(jsonObject)，出现 “$ref“ 解决方案

2024-08-10 22:08:58

解决微信小程序报[ app.json 文件内容错误] app.json app.json 未找到，未找到入口 app.json 文件,或者文件读取失败,请检查后重新编译。小程序app.json报错

2024-08-10 22:08:53

windows系统完全卸载并重装Node(亲测可用)

2024-08-10 22:08:34

npm常用命令详解（一）

2024-08-10 22:08:34

大家推荐的文章
1

JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000
2

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000
3

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
4

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
5

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000
6

jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000
7

基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000
8

VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000
9

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
10

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！