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

目录

一、列表渲染（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 apidata: function () {return {// 1.moviesmovies:["金手指","哆啦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 apidata: 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 apidata: 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 apidata: 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 apidata: 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 apidata: function () {return {message: "Hello Model",account: "",password: ""}},methods: {inputChange(event) {this.message = event.target.value},loginClick() {const account = this.accountconst 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 apidata: 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 apidata: 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 apidata: 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 apidata: 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 apidata: 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 }} 实时显示在页面上。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/2641.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Springboot+Vue项目-基于Java+MySQL的企业客户管理系统(附源码+演示视频+LW)

Springboot+Vue项目-基于Java+MySQL的企业客户管理系统(附源码+演示视频+LW)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;Java毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计 &…
阅读更多...
前端零代码开发实践：页面嵌套+逻辑连线0开发扩展组件，实现切换开关控制扇叶转动。能无代码封装扩展组件，有别于常规的web组态或低代码平台

前端零代码开发实践：页面嵌套+逻辑连线0开发扩展组件，实现切换开关控制扇叶转动。能无代码封装扩展组件，有别于常规的web组态或低代码平台

前言&#xff1a; 官网:http://www.uiotos.net/ 什么是 UIOTOS&#xff1f; 这是一款拥有独创专利技术的前端零代码工具&#xff0c;专注于解决前端界面开发定制难题&#xff0c;原型即应用&#xff01;具有页面嵌套、属性继承、节点连线等全新特性&#xff0c;学习门槛低…
阅读更多...
网络安全之SQL注入及防御（下篇）

网络安全之SQL注入及防御（下篇）

目录 什么是SQL注入&#xff1f; 一&#xff0c;SQL注入会导致什么呢&#xff1f; 二&#xff0c;SQL注入思想与步骤 三&#xff0c;SQL注入的绕过 四&#xff0c;sqlmap工具的使用 五&#xff0c;sql注入的防御方法 总结 什么是SQL注入&#xff1f; SQL注入&#xff08;…
阅读更多...
第二证券|股票做短线要关注什么？

第二证券|股票做短线要关注什么？

在股市中短线交易因其快速的盈利时机而招引了众多投资者&#xff0c;但做短线想要挣钱也不是那么容易的。对于股票做短线要重视什么&#xff0c;第二证券下面就为我们具体介绍一下。 短线交易需重视&#xff1a; 1、商场短期趋势。短线投资者首先需要重视的是全体商场趋势&am…
阅读更多...
tokio多任务绑定cpu(绑核)

tokio多任务绑定cpu(绑核)

tokio 是 rust 生态中流行的异步运行时框架。在实际生产中我们如果希望 tokio 应用程序与特定的 cpu core 绑定该怎么处理呢&#xff1f; 首先我们先写一段简单的多任务程序。 use tokio; use tokio::runtime; use core_affinity;fn tokio_sample() {let rt runtime::Builde…
阅读更多...
【软考】UML中的关系

【软考】UML中的关系

目录 1. 说明2. 依赖3. 关联4. 泛化5. 实现 1. 说明 1.UML中有4种关系&#xff1a;依赖、关联、泛化和实现2.这 4种关系是 UML,模型中可以包含的基本关系事物。它们也有变体&#xff0c;例如&#xff0c;依赖的变体有精化、跟踪、包含和延伸 2. 依赖 1.依赖(Dependency)。2.…
阅读更多...
【InternLM实战营---第六节课笔记】

【InternLM实战营---第六节课笔记】

一、本期课程内容概述 本节课的主讲老师是【樊奇】。教学内容主要包括以下三个部分&#xff1a; 1.大模型智能体的背景及介绍 2. Lagent&AgentLego框架介绍 3.Lagent&AgentLego框架实战 二、学习收获 智能体出现的背景 智能体的引入旨在克服大模型在应对复杂、动态任…
阅读更多...
glsl部分变量

glsl部分变量

变量 in bool gl_FrontFacing ; in vec4 gl_FragCoord ;参考 gl docgl_FrontFacinggl_FragCoord
阅读更多...
【设计模式】使用中介者模式优化表单交互

【设计模式】使用中介者模式优化表单交互

我们想象一下机场的指挥塔&#xff0c;如果没有指挥塔的存在&#xff0c;每一架飞机要和方圆 100 公里内的所有飞机通信&#xff0c;才能确定航线以及飞行状况&#xff0c;后果是不可想象的。现实中的情况是&#xff0c;每架飞机都只需要和指挥塔通信。指挥塔作为调停者&#x…
阅读更多...
93页 | 数据中台标准技术体系方案（免费下载）

93页 | 数据中台标准技术体系方案（免费下载）

【1】关注本公众号&#xff0c;转发当前文章到微信朋友圈 【2】私信发送 数据中台标准技术体系方案 【3】获取本方案PDF下载链接&#xff0c;直接下载即可。 如需下载本方案PPT原格式&#xff0c;请加入微信扫描以下方案驿站知识星球&#xff0c;获取上万份PPT解决方案&#…
阅读更多...
文件上传漏洞-白名单检测

文件上传漏洞-白名单检测

如何确认是否是白名单检测 上传一张图片与上传一个自己构造的后缀&#xff0c;如果只能上传图片不能上传其它后缀文件&#xff0c;说明是白名单检测。 绕过技巧 可以利用 00 截断的方式进行绕过&#xff0c;包括 %00 截断与 0x00 截断。除此之外如果网站存在文件包含漏洞&…
阅读更多...
ElasticSearch总结二

ElasticSearch总结二

正向索引和倒排索引&#xff1a; 正向索引&#xff1a; 比方说我这里有一张数据库表&#xff0c;那我们知道对于数据库它一般情况下都会基于i d去创建一个索引&#xff0c;然后形成一个b树。 那么你根据i d进行检索的速度&#xff0c;就会非常的快&#xff0c;那么这种方式的…
阅读更多...
智慧水生态系统的架构设计与优化：内蒙古硕达智水百数低代码平台的实践

智慧水生态系统的架构设计与优化：内蒙古硕达智水百数低代码平台的实践

随着业务的不断扩展&#xff0c;传统的项目管理方式已无法满足现代水生态项目的需求。为提高项目管理和决策效率&#xff0c;内蒙古硕达智水生态科技决定引入百数作为其数字化转型的合作伙伴。 内蒙古硕达智水生态科技有限公司&#xff1a; 内蒙古硕达智水生态科技有限公司&a…
阅读更多...
用于割草机器人，商用服务型机器人的陀螺仪

用于割草机器人，商用服务型机器人的陀螺仪

介绍一款EPSON推出适用于割草机器人&#xff0c;商用服务型机器人的高精度陀螺仪模组GGPM61&#xff0c;具体型号为GGPM61-C01。模组GGPM61是一款基于QMEMS传感器的低成本航向角输出的传感器模组&#xff0c;它可以输出加速度、角速度及姿态角等信息&#xff0c;为控制机器人运…
阅读更多...
人工智能基础-Python之Pandas库教程

人工智能基础-Python之Pandas库教程

文章目录 前言一、Pandas是什么&#xff1f;二、使用步骤1.引入库2.数据读取2.1 数据类型2.2 数据读取1.常见操作2.txt读取 3.pandas的数据结构3.1 Series1.属性2.创建Series3.查询 3.2 DataFrame1.创建DataFrame 4.查询数据4.1 data.loc 根据行列标签值进行查询1.使用单个labe…
阅读更多...
ASP.NET Core 3 高级编程(第8版) 学习笔记 04

ASP.NET Core 3 高级编程(第8版) 学习笔记 04

第 19 章主要介绍 Restful Service 的相关知识。Restful Service 的核心内容是&#xff1a;&#xff08;1&#xff09;HTTP 请求或 HTTP 动词&#xff0c;用 HTTP 请求表达不同的操作&#xff0c;最好遵守惯例。&#xff08;2&#xff09;资源&#xff0c;通过 PATH 结合 paylo…
阅读更多...
stm32f4单片机强制类型转换为float程序跑飞问题

stm32f4单片机强制类型转换为float程序跑飞问题

如题&#xff0c;在一个数据解析函数中使用了*(float *)&data[offset]&#xff0c;其中data为uint8类型指针&#xff0c;指向的value地址为 可以看到地址0x20013A31非对齐&#xff0c;最终在执行VLDR指令时导致跑飞 VLDR需要使用对齐访问 跑飞后查看SCB寄存器发现确实是非…
阅读更多...
企业级开源版本管理系统GIT分析

企业级开源版本管理系统GIT分析

作者：私语茶馆 1.开源版本管理各种易混淆概念 开源版本软件管理存在Git、GitHub、TortoiseGit等各种概念容易混淆，本文讲解这些系统的概念、用途和范围，以及如何基于开源软件搭建版本管理系统。GIT密切相关的几个软件概念和解释如下： gitHub：全球最大的代码托管和写作平台…
阅读更多...
XiaodiSec day038 Learn Note 小迪安全学习笔记

XiaodiSec day038 Learn Note 小迪安全学习笔记

XiaodiSec day038 Learn Note 小迪安全学习笔记 记录得比较凌乱&#xff0c;不尽详细 day 38 XSS XSS 的最后一节 结合 ctfshow 的题 316 - 331 关 16 题捏 开始 ctfshow 启动 使用 onerror 实践绕过对 script 的过滤 onload 时间能自动载入&#xff0c;加载自动执行 …
阅读更多...
【网络安全】在网络中如何对报文和发送实体进行鉴别？

【网络安全】在网络中如何对报文和发送实体进行鉴别？

目录 1、报文鉴别 &#xff08;1&#xff09;使用数字签名进行鉴别 &#xff08;2&#xff09;密码散列函数 &#xff08;3&#xff09;报文鉴别码 2、实体鉴别 鉴别(authentication) 是网络安全中一个很重要的问题。 一是要鉴别发信者&#xff0c;即验证通信的对方的确是…
阅读更多...
最新文章

Copyright @ 2022~2023