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

最新推荐文章于 2024-06-05 14:26:44 发布
最新推荐文章于 2024-06-05 14:26:44 发布
阅读量728 收藏
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhaihaohao1/article/details/89510943
版权

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=
最低0.47元/天 解锁文章
zhaihaohao1
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue更新监测, key作用, 虚拟DOM,设置动态样式,过滤器, 计算属性, 侦听器的了解使用
m0_66430536的博客
02-25 240
Vue基础_更新监测和key v-for更新监测 目标结构变化, 触发v-for的更新 数组变更方法, 就会导致v-for更新, 页面更新 数组非变更方法, 返回新数组, 就不会导致v-for更新, 可采用覆盖数组或this.$set() 数组变更方法 数组非变更方法 有的数组方法不导致v-for更新页面, 如何处理? 拿返回的新数组, 直接替换旧数组 this.$set()方法更新某个值 v-for就地更新 当数组改变后是如何更新的 v..
Vue获取DOM元素样式 && 样式更改
weixin_34226706的博客
02-09 1417
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 'style' is not definde的错误， 这时候可以在 mounted 里用 $refs 来获取样式，并进行更改： <template> <div style="display: block;" ref="abc"> <!-- ... --&g...
vue中数组常用的六种循环方法、VUE中list的各种方法和运用
最新发布
zlfjavahome的专栏
06-05 976
简单记录一下，常用的六种数组循环的方法，分别是for()，map()，forEach()，filter ()，every()，some();
虚拟 DOM
f20212001的博客
06-14 167
​ 所有的浏览器渲染引擎工作流程大致分为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.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;
vue中v-for循环选中点击的元素并对该元素添加样式操作
10-15
主要介绍了vue中v-for循环选中点击的元素并对该元素添加样式操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-dom-hints:Vue devtool，用于在DOM中标识Vue组件及其SFC路径
05-01
:light_bulb: 提示提示 通过__vue__属性在DOM中添加开发提示的Vue开发__vue__ 即时识别DOM中的所有Vue组件及其在代码库中的位置 :person_raising_hand: 为什么？ :glowing_star: 与浏览器无关的最小替代品！ :woman_...
vue-quill-editor的使用及个性化定制操作
11-19
Vue-quill-editor是一款基于Quill、专为Vue.js设计的富文本编辑器，适用于服务端渲染和SPA（单页应用）场景。它提供了丰富的编辑功能，同时也支持个性化定制，以满足不同项目的需求。 ### 一、安装 1. **安装模块*...
Vue ~ element-ui 动态表单验证，支持添加和删除操作
07-27
本项目“Vue ~ element-ui 动态表单验证”是针对Vue和Element-UI的一个应用场景，主要关注的是动态表单验证以及表单元素的增删操作。下面我们将详细探讨这些知识点。 1. Vue.js动态表单验证： Vue.js允许开发者通过...
学习vue-element-admin，优化了大量融入代码，添加中文注释
05-16
- **虚拟DOM**：Vue.js通过虚拟DOM实现高效的数据更新，减少了不必要的DOM操作。 - **响应式系统**：Vue.js的数据是响应式的，当数据变化时，视图会自动更新。 - **指令系统**：如`v-if`、`v-for`、`v-bind`等，...
Vue使用虚拟dom进行渲染view的方法
10-15
主要介绍了Vue使用虚拟dom进行渲染view的方法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
获取DOM对象的五种方式
微风的博客
08-15 2616
#获取DOM对象的五种方式 ##一，通过ID获取DOM对象 ``` varxx=document.getElementById（'xx'） ``` ##二.通过签名获取DOM对象 ``` varxx=document.getElementsByTagId（'xx'） ``` ##三.通过类名获取DOM对象（获取的） ``` varxx=document.getElementsByClassName('xx') ``` ##...
在Vue3中如何快捷的操作dom元素（改样式、加事件等等）
2301_76603086的博客
05-07 2421
在vue3中更加简便的操作dom元素来改样式等等
vue中的ref作用，可以实现DOM的联动操作
Bright2017的博客
08-21 3679
vue中的ref作用
【Vue3】获取DOM节点的几种方式
m0_62811051的博客
11-30 3万+
在Vue3框架里面是解除了this这个对象，所以无法使用this.$refs的方式获取自定义组件 ref 的DOM节点。因为每个 vue 的组件实例上，都包含一个 $refs 对象，里面。所以在默认情况下， 组件的 $refs 指向一个空对象。，通过该函数获取对象节能看到该对象包含界面中的refs。但是vue3中自带了能返回当前组件实例对象的函数。获取相应元素并进行操作。
Vue基础
weixin_45203607的博客
09-13 1318
Vue基础 创建Vue实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的： var vm = new Vue({ }) 在构造函数中传入一个对象，并且在对象中声明各种Vue需要的数据和方法，包括： - el - data - methods - computed - beforeCreate() - created () - watch 等等 还有就是可以通过Vue实例对象调用 对象内的数据 下面会有演示 el 绑定模板 每个Vue实例都需要关联一段Html模板，Vue会基于
Vue学习笔记
weixin_52938172的博客
12-12 1298
vue入门
vue基础一
dream_of_forget的博客
09-15 2254
1.挂载点el作用 ： 告诉vue实例，你要将data中的数据渲染到哪一个视图2.注意点(1)挂载点可以使用 id选择器（vue推荐使用） 类选择器 标签选择器开发中基本上都是id选择器，保证HTML标签唯一性如果你希望data中的数据能够对多个元素生效，可以将vue实例挂载到父元素中(2)如果选择器选中了多个元素，只会选择第一个元素(3)挂载点不能设置为html和body标签 （程序报错）
ag-grid-vue添加单选框并捕捉单选框点击事件
05-10
要在 ag-grid-vue 中添加单选框并捕获单选框点击事件，可以按照以下步骤进行操作： 1. 在列定义中添加一个名为`checkboxSelection`的列，以显示单选框。例如： ```javascript { headerName: "Select", checkboxSelection: true, width: 80, suppressMenu: true } ``` 2. 在`gridOptions`中设置`rowSelection`属性为`single`，以确保只能选择一个行。例如： ```javascript gridOptions: { rowSelection: 'single' } ``` 3. 在`gridReady`事件处理程序中，将选中行更改事件添加到`gridApi`对象中。例如： ```javascript onGridReady(params) { this.gridApi = params.api; this.gridColumnApi = params.columnApi; this.gridApi.addEventListener('rowSelected', this.onRowSelected.bind(this)); }, onRowSelected(event) { // 处理选中行更改事件 } ``` 4. 在`onRowSelected`事件处理程序中，可以通过`event.data`属性访问选中的行数据。例如： ```javascript onRowSelected(event) { const selectedRowData = event.data; // 处理选中行数据 } ``` 5. 如果要在单击单选框时触发事件，可以使用`cellClicked`事件处理程序。例如： ```javascript onCellClicked(event) { if (event.colDef.checkboxSelection) { // 处理单选框点击事件 } } ``` 完整示例代码如下： ```javascript <template> <div style="height: 500px" class="ag-theme-alpine"> <ag-grid-vue :columnDefs="columnDefs" :rowData="rowData" :gridOptions="gridOptions" @gridReady="onGridReady" @cellClicked="onCellClicked" ></ag-grid-vue> </div> </template> <script> import { AgGridVue } from 'ag-grid-vue'; export default { components: { AgGridVue, }, data() { return { gridApi: null, gridColumnApi: null, columnDefs: [ { headerName: 'Select', checkboxSelection: true, width: 80, suppressMenu: true, }, { field: 'make' }, { field: 'model' }, { field: 'price' }, ], rowData: [ { make: 'Toyota', model: 'Celica', price: 35000 }, { make: 'Ford', model: 'Mondeo', price: 32000 }, { make: 'Porsche', model: 'Boxter', price: 72000 }, ], gridOptions: { rowSelection: 'single', }, }; }, methods: { onGridReady(params) { this.gridApi = params.api; this.gridColumnApi = params.columnApi; this.gridApi.addEventListener('rowSelected', this.onRowSelected.bind(this)); }, onRowSelected(event) { const selectedRowData = event.data; console.log(selectedRowData); }, onCellClicked(event) { if (event.colDef.checkboxSelection) { console.log('Checkbox clicked'); } }, }, }; </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值