Vue学习32----虚拟dom操作（操作内联样式，类选择器，元素属性，添加删除修改数据，单选框，多选框）

最新推荐文章于 2025-02-07 18:57:12 发布
最新推荐文章于 2025-02-07 18:57:12 发布
阅读量764 收藏
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zhaihaohao1/article/details/89510943
版权
本文详细介绍了在Vue.js中如何操作虚拟DOM，包括内联样式的修改、类选择器的使用、元素属性的增删改、数据操作与绑定、单选框和多选框的交互实现，以及在列表中进行添加、删除和修改数据的操作。通过实例代码展示了具体的实现过程。

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

1.操作内联样式：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<style type="text/css">
			.content {
				display: flex;
				/* 主轴方向 */
				flex-direction: row;
				

			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="content">
				<div v-bind:style="styleObject" @click="getData()">zhh</div>
			</div>

		</div>
		<script>
			new Vue({
				el: '#app',
				data: {
					styleObject: {
						width:'100px',
						height: '100px',
						color: 'red',
						fontSize: '13px',
						backgroundColor: '#00FFFF'

					}
				},
				methods: {
					getData() {
						this.styleObject.backgroundColor='#000000';
					}
				}
			})
		</script>
	</body>
</html>

2、操作多选框是否选中：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<label>
				<!-- 操作是否选中 -->
				<label v-for="(item, index) in items">
					<input type="checkbox" v-model="item.checked" @change="getData(item, index)">{{item.message}}
				</label>

			</label>

		</div>

		<script>
			new Vue({
				el: '#app',
				data: {
					items: [
						{message: '刘备',checked: true},
						{message: '关羽',checked: false},
						{message: '张飞',checked: false},
					]
				},
				methods: {
					getData(item, index) {
						console.log(item.checked+">>>"+index);
					}
				}
			})
		</script>
	</body>
</html>

3列表添加删除条目：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<!-- 引入vue的库 -->
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!--v-model把把输入框中的数据绑定到icontent变量-->
			<input type="text" v-model="icontent">
			<button @click="add()">+增加</button>
			<hr />
			<ul>
				<li v-for="(item,index) in list">
					{{item}}----<button @click="idelete(index)">删除</button>
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					message: 'Hello Vue!',
					list: ['刘备', '关羽', '张飞'],
					icontent: ''
				},
				methods: {
					// 添加数据
					add: function() {
						if(this.icontent){
							this.list=[...this.list,this.icontent];
						}else{
							alert('请写入内容');
						}
						
					},
					// 删除数据
					idelete: function(index) {
						this.list.splice(index, 1); // this is how to remove an item
					}

				},
				// 生命周期的函数
				mounted: function  () {
					console.log('模板编译mounted');
				},


			})
		</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">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
		<!-- 引入vue的库 -->
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}

			.buttonLayout {
				width: 100%;
				height: 30px;
				left: 0px;
				top: 0px;
				/* background-color: seagreen; */
				position: relative;
			}

			.button {
				width: 50px;
				line-height: 30px;
				position: absolute;
				top: 10px;
				right: 10px;
				background-color: yellow;
				text-align: center;
				border: black 1px solid;
				border-radius: 5px;
			}

			.line {
				width: 100%;
				height: 1px;
				background-color: red;
				margin-top: 20px;
				margin-bottom: 20px;
			}

			.cContent {
				height: 61px;
				background-color: aqua;
			}

			.cContentItem {
				float: left;
				margin: 10px;
				padding: 10px;
				background-color: yellowgreen;
				border: black 1px solid;
				border-radius: 5px;
			}

			.cFooterItem {
				width: 100%;
				height: 50px;
				position: relative;
				background-color: #FFFFCC;
				border-bottom: #000000 1px solid;
			}

			.cFooterContent {
				position: absolute;
				width: 100px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				top: 50%;
				margin-top: -15px;
				left: 10px;
				background-color: #00FFFF;
			}

			.cDelete {
				position: absolute;
				top: 50%;
				margin-top: -10.5px;
				right: 10px;
			}

			/* 伪类，鼠标移动上来时，显示红色 */
			.cDelete:hover {
				color: #FF0000;
			}

			.cBianJi {
				position: absolute;
				top: 50%;
				margin-top: -10.5px;
				right: 80px;
			}

			/* 伪类，鼠标移动上来时，显示红色 */
			.cBianJi:hover {
				color: #FF0000;
			}

			.addclass {
				float: left;
				margin: 10px;
				padding: 10px;
				background-color: yellow;
				border: black 1px solid;
				border-radius: 5px;
			}
		</style>
	</head>

	<body>
		<!-- 里面放入新的选项 -->
		<div id="app">
			<div id="content" class="cContent">
				<div v-for="(item,index) in list" class="cContentItem" :class="[item.check ? 'addclass' : '']" @click="addClick(item,index)">
					{{item.name}}
				</div>
			</div>
			<div class="buttonLayout">
				<div class="button" @click="select">选择</div>
			</div>
			<div class="line"></div>
			<div>
				<div v-for="(item,index) in footerList" class="cFooterItem">
					<span class="cFooterContent">{{item.name}}</span>
					<span class="cDelete" @click="addDElete(item,index)">删除</span>
					<span class="cBianJi" @click="addEdit(item,index)">编辑</span>
					<div style="clear: both;"></div>
				</div>
			</div>
		</div>

		<script>
			var app = new Vue({
				el: '#app',
				// 里面处理数据
				data: {
					message1: '默认数据',
					list: [{
						name: '刘备',
						check: false

					}, {
						name: '关羽',
						check: false


					}, {
						name: '张飞',
						check: false

					}, {
						name: '赵云',
						check: false


					}, {
						name: '马超',
						check: false

					}, ],
					selectList: [],
					footerList: [],

				},
				// 里面写方法
				methods: {
					// 选择按钮添加点击事件
					select: function() {
						this.footerList = this.selectList;
						// list 把数组里面选中的过滤掉
						this.list = this.list.filter(function(element) {
							return !element.check;
						})

					},
					// 列表
					addClick: function(item, index) {
						// 取反，如果是true改成false,如果是false改成true
						item.check = !item.check;
						// 查看是否有这个元素，如果有则删除
						if (this.selectList.includes(item)) {
							// 过滤
							this.selectList = this.selectList.filter(function(element) {
								return element != item;
							});
						} else {
							// 添加元素
							this.selectList = [...this.selectList, item];

						}

					},
					addDElete: function(item, index) {
						console.log('删除的点击事件' + index);
						this.footerList.splice(index, 1);

					},
					addEdit: function(item, index) {
						console.log('编辑的点击事件' + index);
						// 拿到输入的内容
						let content = window.prompt('修改内容');
						if (!content) {
							return;
						}
						let arrayEle = this.footerList[index];
						// 改变数组的长度 iArray.length = 12;，vue监视不到改变
						// 通过下标修改数组的下标修改数组中的元素，vue监视不到改变
						this.footerList = this.footerList.map(function(element) {
							if (element == arrayEle) {
								element.name = content;
							}
							return element;
						});
					}

				},
				// 生命周期的函数
				mounted() {
					console.log('模板编译完成4----mounted');
				},
			});
		</script>

	</body>

5自己写的单选框样式：

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

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
		<!-- 引入vue的库 -->
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}

			.buttonLayout {
				width: 100%;
				height: 30px;
				left: 0px;
				top: 0px;
				/* background-color: seagreen; */
				position: relative;
			}

			.button {
				width: 50px;
				line-height: 30px;
				position: absolute;
				top: 10px;
				right: 10px;
				background-color: yellow;
				text-align: center;
				border: black 1px solid;
				border-radius: 5px;
			}

			.line {
				width: 100%;
				height: 1px;
				background-color: red;
				margin-top: 20px;
				margin-bottom: 20px;
			}

			.cContent {
				height: 61px;
				background-color: aqua;
			}

			.cContentItem {
				float: left;
				margin: 10px;
				padding: 10px;
				background-color: yellowgreen;
				border: black 1px solid;
				border-radius: 5px;
			}

			.addclass {
				float: left;
				margin: 10px;
				padding: 10px;
				background-color: yellow;
				border: black 1px solid;
				border-radius: 5px;
			}
		</style>
	</head>

	<body>
		<!-- 里面放入新的选项 -->
		<div id="app">
			<div id="content" class="cContent">
				<div v-for="(item,index) in list" class="cContentItem" :class="[index==checkIndex ? 'addclass' : '']" v-on:click="addClick(item,index)">{{item}}</div>
			</div>
			
		</div>

		<script>
			var app = new Vue({
				el: '#app',
				// 里面处理数据
				data: {
					message1: '默认数据',
					list:['关羽','张飞','赵云','黄忠','马超'],
					// 记录选中的下标，默认不选中
					checkIndex:-1,
				},
				// 里面写方法
				methods: {
					// 列表
					addClick: function(item, index) {
						// 点击后，记住点击的下标，在渲染时判断
						// 在渲染的时候 checkIndex 不用 this.checkIndex
						this.checkIndex = index;
					}

				},
				// 生命周期函数，处理数据的绑定
				mouted: {

				}
			});
		</script>

	</body>

6循环修改内容：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}

			.content {
				width: 100%;
				height: 100px;
				background-color: #FFFF00;
			}

			.content .item {
				width: 60px;
				line-height: 30px;
				text-align: center;
				float: left;
				background-color: #00FFFF;
				margin: 10px;
			}
		</style>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div class="content">
				<div class="item" v-for="(item, index) in iArray" @click="upData(index)">
					{{item}}
				</div>

			</div>
		</div>

		<!-- 修改数据 -->
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					parentMessage: 'Parent',
					iArray: ['关羽', '张飞', '赵云', '马超', '黄忠']
				},
				methods: {
					upData: function(index) {
						// 拿到输入的内容
						let content = window.prompt('修改内容');
						let arrayEle = this.iArray[index];
						// 改变数组的长度 iArray.length = 12;，vue监视不到改变
						// 通过下标修改数组的下标修改数组中的元素，vue监视不到改变
						this.iArray=this.iArray.map(function(element) {
							if (element==arrayEle) {
								element = content;
							} 
							return element;
						});
					}

				}
			})
		</script>




	</body>
</html>

源码下载：
上面的代码复制即可运行，无需源码

vue3 - 获取DOM元素并且修改元素样式示例源码，当点击一个元素（比如按钮、容器）需要用更改 style css 的样式（附带详细的功能示例及解决方案）
高级前端工程师
04-12 5821
vue3获取元素并修改元素样式，vue3.0点击修改元素的css样式，vue3怎么修改元素css属性，vue3动态的改变样式，vue3中动态style(动态修改伪元素样式)，Vue3获取DOM元素样式和样式更改示例，vue3通过ref获取dom元素并修改样式，Vue3中如何获取dom元素并修改样式，Vue3 动态修改dom样式，vue3获取dom元素节点并操作元素的样式，vue3.0 获取dom设置样式，Vue3获取DOM元素并修改属性的方法，vue3 怎么动态改变element内部dom元素的样式，vue
Vue及Element UI&vue-element-admin简记
生活在别处
11-21 7713
文章目录概念索引安装vue基本语法声明式渲染动态参数双向绑定数据绑定中进行数据处理使用JS表达式计算属性侦听器Class 与 Style 的数据绑定Class的数据绑定Style的数据绑定条件与循环条件渲染v-if指令v-show指令列表（数组）渲染数据更新检测事件监听器修饰符事件修饰符按键修饰符按键码系统修饰键指令的缩写组件化应用构建vue实例实例生命周期的钩子模板语法高级语法相关概念HTML ...
Vue获取DOM元素样式 && 样式更改
weixin_34226706的博客
02-09 1458
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 'style' is not definde的错误， 这时候可以在 mounted 里用 $refs 来获取样式，并进行更改： <template> <div style="display: block;" ref="abc"> <!-- ... --&g...
ES6 Map 数据结构使用总结
最新发布
涂涂
02-07 882
Map 是 ES6 提供的新的数据结构，它类似于对象，但是"键"的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map 也可以跟踪键值对的原始插入顺序。WeakMap 是一种特殊的 Map，它只接受对象作为键，并且键是弱引用。，对象若被其他变量引用解除，会被自动回收，不会造成内存泄漏。
Vue.js——获取Dom对象的类选择器名(className)
热门推荐
五柳
03-06 4万+
方法一：通过监听器监听方法event参数获取dom对象 代码： &amp;lt;!doctype html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;
虚拟 DOM
f20212001的博客
06-14 209
​ 所有的浏览器渲染引擎工作流程大致分为5步：创建 树 —> 创建 -> 构建 树 —> 布局 -—> 绘制 。注意点：1、 树的构建是文档加载完成开始的？ 构建 树是一个渐进过程，为达到更好的用户体验，渲染引擎会尽快将内容显示在屏幕上，它不必等到整个 文档解析完成之后才开始构建 树和布局。2、 树是 树和 样式表构建完毕后才开始构建的？ 这三个过程在实际进行的时候并不是完全独立的，而是会有交叉，会一边加载，一边解析，以及一边渲染。3、 的解析注意点？ 的解析是从右往左逆向
vue中简单使用dom选择器
microcosm1994的博客
09-07 2万+
直接上代码 vue中操作dom及其不方便，可以自己依据jquery选择器的方法来实现简单可以使用的dom选择器 // 方法写在methods中 $ (e) { let eType = 'queryeAll' if (e.indexOf('#') === 0) { eType = 'getElementById' e = e.substr(...
自学前端开发 - VUE 框架 (二)：模板引用、事件处理、表单输入绑定、生命周期、侦听器、组件基础
runsong911的博客
11-15 1163
自学前端开发 - VUE 框架 (二)：渲染、事件处理、表单输入绑定、生命周期、侦听器、组件基础
Vue2-Vue3.0学习笔记（2021年黑马程序员最新视频）
m0_67402588的博客
03-09 2145
Vue 介绍 什么是 vue ？ 构建用户界面 用 vue 往 html 页面中填充数据，非常的方便 框架 框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能！ 要学习 vue，就是在学习 vue 框架中规定的用法！ vue 的指令、组件（是对 UI 结构的复用）、路由、Vuex、vue 组件库 只有把上面老师罗列的内容掌握以后，才有开发 vue 项目的能力！ vue 的两个特性 数据驱动视图： 数据的变化会驱动视图自动更新 好处：程序员只管把数据维护好，那么页面
浅谈Vue当中的绑定，包括属性绑定（v-bind，v-model）和事件绑定（v-on），和它们之间的区别
m0_61768030的博客
01-06 1327
给元素绑定事件监听器。当用于普通元素，只监听原生 DOM 事件。当用于自定义元素组件，则监听子组件触发的自定义事件。（注意：自定义事件是组件通信的内容，我们另外再系统讲！当监听原生 DOM 事件时，方法接收原生事件作为唯一参数。如果使用内联声明，声明可以访问一个特殊的$event。v-on还支持绑定不带参数的事件/监听器对的对象。请注意，当使用对象语法时，不支持任何修饰符。动态的绑定一个或多个 attribute，也可以是组件的 prop。（源于vue文档）（注意：那我们这里主要讲。
VUE｜VUE前端开发--基本语法
匿名用户小易
12-21 953
VUE｜基本语法 一、声明式渲染 ◼ hellovue1.html <html> <head><title>HelloWorld!</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <b...
Vue获取DOM元素样式和样式更改示例
08-31
本篇文章主要介绍了Vue获取DOM元素样式和样式更改示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue使用虚拟dom进行渲染view的方法
10-15
主要介绍了Vue使用虚拟dom进行渲染view的方法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue更新监测, key作用, 虚拟DOM,设置动态样式,过滤器, 计算属性, 侦听器的了解使用
m0_66430536的博客
02-25 277
Vue基础_更新监测和key v-for更新监测 目标结构变化, 触发v-for的更新 数组变更方法, 就会导致v-for更新, 页面更新 数组非变更方法, 返回新数组, 就不会导致v-for更新, 可采用覆盖数组或this.$set() 数组变更方法 数组非变更方法 有的数组方法不导致v-for更新页面, 如何处理? 拿返回的新数组, 直接替换旧数组 this.$set()方法更新某个值 v-for就地更新 当数组改变后是如何更新的 v..
vue2 uniapp、vue3 pc获取dom元素，修改样式的不同写法
L_xxxxxxx的博客
11-08 425
vue2 vue3获取dom元素，修改样式的不同写法
获取DOM对象的五种方式
微风的博客
08-15 2752
#获取DOM对象的五种方式 ##一，通过ID获取DOM对象 ``` varxx=document.getElementById（'xx'） ``` ##二.通过签名获取DOM对象 ``` varxx=document.getElementsByTagId（'xx'） ``` ##三.通过类名获取DOM对象（获取的） ``` varxx=document.getElementsByClassName('xx') ``` ##...
vue获取dom元素节点并操作元素的样式（$el的用法操作元素样式）
weixin_70426591的博客
10-27 5203
vue中操作dom元素
在Vue3中如何快捷的操作dom元素（改样式、加事件等等）
2301_76603086的博客
05-07 2817
在vue3中更加简便的操作dom元素来改样式等等
vue中的ref作用，可以实现DOM的联动操作
Bright2017的博客
08-21 3824
vue中的ref作用
深入浅出HTML-CSS-JS:网页开发三剑客
- **选择器**：定义CSS规则将应用于HTML文档中的哪些元素，如类选择器（.class）、ID选择器（#id）、标签选择器（element）和属性选择器（[attribute="value"]）。 - **盒模型**：CSS中的盒模型定义元素框处理元素...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值