## 一、文本渲染指令 #### 1、`v-html` 使用`v-html`进行数据绑定 ```html Title Checked names: Jack John Mike ``` #### 2、`v-text` ```html Title Checked names: Jack John Mike ``` #### 3、区别 | **特性** | **`v-text`** | **`v-html`** | | ------------ | --------------------------- | ------------------------------------ | | **输出类型** | 纯文本(转义 HTML) | 原始 HTML(解析标签) | | **安全性** | ✅ 安全(自动转义,防 XSS) | ❌ 危险(需确保内容可信) | | **应用场景** | 显示普通文本(如用户评论) | 渲染富文本内容(如 CMS 返回的 HTML) | | **等效操作** | `element.textContent = ...` | `element.innerHTML = ...` | ## 二、属性绑定指令 #### 1、原生属性绑定 以`title`为例 ```html Title ``` 可以简写成 ```html ``` 所有的原生属性都可以绑定,比如`class`、`style`等属性 #### 2、绑定样式 ##### 类样式静态绑定 ```html Title ``` ##### 类样式动态绑定 在样式绑定的位置声明一个对象,通过布尔值来决定类样式是否选择 ```html Title ``` ##### 内联样式动态绑定 ```html Title ``` **注意**:在使用内联样式(:style)时,样式属性不能出现`-`,所有含有`-`的属性名都要改为驼峰样式,例如:`font-size`要改成`fontSize`。 ## 三、事件处理指令 #### 1、常见的事件函数 ##### 鼠标事件 `onclick` - 点击事件(按下并释放鼠标按钮) - 示例:`点我` `ondblclick` - 双击事件 - 示例:`双击区域` `onmouseover` / `onmouseout` - 鼠标移入元素 / 移出元素 - 示例:`悬浮效果` `onmousedown` / `onmouseup` - 鼠标按下 / 释放 - 示例:`拖拽` `onmousemove` - 鼠标在元素内移动 - 示例:`移动轨迹` ##### 键盘事件 `onkeydown` / `onkeyup` - 键盘按下 / 释放 - 示例:`` `onkeypress` - 按下并释放产生字符的键(已逐渐被 `onkeydown` 替代) - 示例:`` ##### 表单事件 `onchange` - 表单元素值变化(如输入框、下拉框) - 示例:`...` `onsubmit` - 表单提交前触发 - 示例:`...` `onfocus` / `onblur` - 元素获得焦点 / 失去焦点 - 示例:`` `oninput` - 输入内容实时触发 - 示例:`` ##### 窗口/文档事件 `onload` - 页面或资源加载完成 - 示例:`` `onresize` - 窗口大小变化 - 示例:`` `onscroll` - 滚动条滚动 - 示例:`可滚动区域` `onbeforeunload` - 页面关闭前警告 - 示例:`` ##### 其他常用事件 `ontouchstart` / `ontouchend` - 触摸设备开始/结束触摸 `onerror` - 资源加载失败(如 ``) `ondragstart` / `ondrop` - 拖拽操作(需配合 `draggable="true"`) #### 2、使用`v-on:`绑定事件名 ```html Title 点击 ``` **注意**:绑定的事件需要在事件前面加`v-on:`,并且绑定事件触发的函数需要卸载Vue的`methods`属性下,可以使用`function methodName(){}`来声明(不推荐),也可以使用`methodName()=>{}`来声明或者省略箭头,使用`methodName(){}`直接声明(推荐) #### 3、使用`@`绑定事件名 ```html Title 点击 点击 ``` #### 4、传入参数 直接和正常使用函数一样 ```html Title {{num}} 加 减 ``` #### 5、通过事件切换样式 ```html Title 这是一段文字,点我可以切换颜色! ``` #### 6、接收事件对象指令 接收事件对象需要传入`$event`参数,并在函数形参列表中添加一个参数来承接事件对象,若函数只有一个参数且为事件对象时,那么可以不写`$event`直接用函数名调用即可。 ```html Title {{num}} 加 减 ``` #### 7、事件修饰符 在JavaScript中可以使用 `event.preventDefault()` 或 `event.stopPropagation()` 等来阻止事件冒泡,或者阻止浏览器默认行为。那么Vue也提供了这样的功能,叫做事件修饰符。 什么是事件冒泡?当两个组件所占区域有重叠且都绑定点击事件时,点击上层组件也会触发下层组件的点击事件。 ```html Title ``` **注意**:上述代码通过`事件.stop`来阻止了事件冒泡行为,通过`事件.prevent`来阻止了浏览器右键弹出菜单的默认事件行为。 ## 四、条件渲染指令 条件渲染指令可以根据条件来判断是否渲染/显示某些元素。 #### 1、`v-if` ```html Title 显示 加 减 hello1 num为0 num为1 num为2 num不为0,1,2 ``` **注意**:`v-if`判断结构与Java判断语句结构一致,只是位置不同,`v-else-if`与`v-else`必须跟在`v-if`之后,`v-else`之后不需要加条件判断。 #### 2、`v-show` ```html Title 这里使用v-show ``` **注意**:`v-show`通过条件来设置元素是否为`display:none`,即使条件为假,元素也会被渲染出来。 #### 3、两者区别 | 对比维度 | `v-if` | `v-show` | | :------------------------------ | :----------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------- | | 核心机制 | **条件性渲染**:根据条件的真假,动态地**创建或销毁**DOM元素及其组件。 | **条件性显示**:无论条件真假,DOM元素始终会被**渲染**,只是通过CSS的 `display` 属性来切换显示/隐藏。 | | 编译与初始渲染 | **惰性的**:如果初始条件为 `false`,则元素不会被渲染,对应的生命周期钩子(如 `onMounted`)也不会被调用。 | **非惰性的**:无论初始条件如何,元素都会被编译并渲染到DOM中,只是初始为隐藏状态。相关的生命周期钩子会在组件挂载时执行。 | | 切换开销 | **高**:切换条件时,会触发组件的**创建和销毁**(包括生命周期钩子的调用),以及DOM的**添加和移除**操作。 | **低**:切换条件时,仅仅是切换CSS属性(`display: none/block`),不会涉及组件的销毁和重建。 | | 适用场景 | **运行时条件很少改变**,或者**需要惰性渲染**以提升初始加载性能的场景。例如:根据用户权限决定是否渲染某个功能模块。 | **需要频繁切换显示状态**的场景。例如:标签页切换、下拉菜单、模态框的显示/隐藏。 | | 与`v-else` / `v-else-if` 的配合 | **可以**:可以与 `v-else` 和 `v-else-if` 配合使用,实现“分支”逻辑。 | **不可以**:不能与 `v-else` 或 `v-else-if` 链式使用。 | | **性能考量** | 如果元素初始不需要显示,使用`v-if` 可以避免不必要的渲染开销,**优化初始加载性能**。 | 如果元素需要频繁切换,使用`v-show` 可以避免反复创建销毁带来的性能损耗,**优化运行时切换性能**。 | | 对`` 标签的支持 | **支持**:可以用于 `` 标签,来控制一组元素的渲染。 | **不支持**:不能用于 `` 标签,只能用于实际的DOM元素。 | ## 五、循环遍历指令 `v-for`可以基于原始数据多次渲染元素或模板块。 #### 1、遍历对象属性 ```html Title 编号:{{user.userId}}姓名:{{user.userName}}性别:{{user.userSex}} {{index}}:{{key}}:{{value}} ``` **注意**:`v-for`遍历对象语法为`* in Object`,若只需取出参数的值,`*`处只需写一个临时变量(变量名随意)来存储;若需取出对象属性名的同时取出值,则`*`处需要填写固定的格式`(value,key)`;若需取出对象属性名、属性值并按照属性定义顺序来输出索引,则`*`处需要填写固定的格式`(value,key,index)`。 #### 2、遍历数组 ```html Title {{index}}:{{user.userID}},{{user.userName}},{{user.userSex}} {{index}}:{{user.userID}},{{user.userName}},{{user.userSex}} 点击改变数据 ``` **注意**:若不为遍历出来每一项设上唯一标识,那么若数组中某些值发生变化,则会重新渲染整个v-for,若设置了唯一标识`:key="PKey"`(一般为对象字段的主键或唯一键,不推荐使用`index`),则通过标识直接更新该部分。 ## 六、综合案例:表格修改 ```html Title 编号 姓名 年龄 操作 删除 清空表单 添加 姓名: 年龄: 添加 ``` Loading... ## 一、文本渲染指令 #### 1、`v-html` 使用`v-html`进行数据绑定 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.global.js"></script> </head> <body> <div id="app"> <p v-html="time"></p> <div>Checked names: <span v-html="checkedNames"></span></div> <input id="jack" type="checkbox" v-model="checkedNames" value="Jack"/> <label for="jack">Jack</label> <input id="john" type="checkbox" v-model="checkedNames" value="John"/> <label for="john">John</label> <input id="mike" type="checkbox" v-model="checkedNames" value="Mike"/> <label for="mike">Mike</label> </div> <script> Vue.createApp({ data() { return { checkedNames: ['Jack'], time: '00:00:00' }; }, // 可以保证整个DOM全部加载完成后才会执行下面代码 mounted() { setInterval(() => { let time = new Date(); this.time = time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds(); }, 1000); } }).mount('#app') </script> </body> </html> ``` #### 2、`v-text` ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.global.js"></script> </head> <body> <div id="app"> <p v-html="time"></p> <div>Checked names: <span v-text="checkedNames"></span></div> <input id="jack" type="checkbox" v-model="checkedNames" value="Jack"/> <label for="jack">Jack</label> <input id="john" type="checkbox" v-model="checkedNames" value="John"/> <label for="john">John</label> <input id="mike" type="checkbox" v-model="checkedNames" value="Mike"/> <label for="mike">Mike</label> </div> <script> Vue.createApp({ data() { return { checkedNames: ['Jack'], time: '00:00:00' }; }, // 可以保证整个DOM全部加载完成后才会执行下面代码 mounted() { setInterval(() => { let time = new Date(); this.time = time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds(); }, 1000); } }).mount('#app') </script> </body> </html> ``` #### 3、区别 | **特性** | **`v-text`** | **`v-html`** | | ------------ | --------------------------- | ------------------------------------ | | **输出类型** | 纯文本(转义 HTML) | 原始 HTML(解析标签) | | **安全性** | ✅ 安全(自动转义,防 XSS) | ❌ 危险(需确保内容可信) | | **应用场景** | 显示普通文本(如用户评论) | 渲染富文本内容(如 CMS 返回的 HTML) | | **等效操作** | `element.textContent = ...` | `element.innerHTML = ...` | ## 二、属性绑定指令 #### 1、原生属性绑定 以`title`为例 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.global.js"></script> </head> <body> <div id="app"> <p v-bind:title="msg" v-text="hello"></p> </div> <script> Vue.createApp({ data() { return { hello: 'hello', msg: '这是打招呼' }; }, }).mount('#app') </script> </body> </html> ``` 可以简写成 ```html <p :title="msg" v-text="hello"></p> ``` 所有的原生属性都可以绑定,比如`class`、`style`等属性 #### 2、绑定样式 ##### 类样式静态绑定 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.global.js"></script> <style> .one{ color: red; } .two{ font-size: 48px; } </style> </head> <body> <div id="app"> <p :class="className" v-text="hello"></p> </div> <script> Vue.createApp({ data() { return { hello: 'hello', className: 'one two' }; }, }).mount('#app') </script> </body> </html> ``` ##### 类样式动态绑定 在样式绑定的位置声明一个对象,通过布尔值来决定类样式是否选择 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.global.js"></script> <style> .one { color: red; } .two { font-size: 48px; } </style> </head> <body> <div id="app"> <p :class="{one:isOne,two:isTwo}" v-text="hello"></p> </div> <script> Vue.createApp({ data() { return { hello: 'hello', isOne: true, isTwo: false }; }, }).mount('#app') </script> </body> </html> ``` ##### 内联样式动态绑定 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.global.js"></script> <style> .one { color: red; } .two { font-size: 48px; } </style> </head> <body> <div id="app"> <p :class="userId==1?className:''" v-text="hello"></p> <p :style="{color:colorValue,fontSize:fontSizeValue}" v-text="hello"></p> </div> <script> Vue.createApp({ data() { return { hello: 'hello', userId: 1, className: 'one two', colorValue: 'orange', fontSizeValue: '36px' }; }, }).mount('#app') </script> </body> </html> ``` **注意**:在使用内联样式(:style)时,样式属性不能出现`-`,所有含有`-`的属性名都要改为驼峰样式,例如:`font-size`要改成`fontSize`。 ## 三、事件处理指令 #### 1、常见的事件函数 ##### 鼠标事件 `onclick` - 点击事件(按下并释放鼠标按钮) - 示例:`<button onclick="alert('Clicked!')">点我</button>` `ondblclick` - 双击事件 - 示例:`<div ondblclick="handleDoubleClick()">双击区域</div>` `onmouseover` / `onmouseout` - 鼠标移入元素 / 移出元素 - 示例:`<div onmouseover="highlight(this)" onmouseout="unhighlight(this)">悬浮效果</div>` `onmousedown` / `onmouseup` - 鼠标按下 / 释放 - 示例:`<button onmousedown="startDrag()" onmouseup="endDrag()">拖拽</button>` `onmousemove` - 鼠标在元素内移动 - 示例:`<div onmousemove="trackMouse(event)">移动轨迹</div>` ##### 键盘事件 `onkeydown` / `onkeyup` - 键盘按下 / 释放 - 示例:`<input type="text" onkeydown="checkKey(event)">` `onkeypress` - 按下并释放产生字符的键(已逐渐被 `onkeydown` 替代) - 示例:`<input onkeypress="validateInput(event)">` ##### 表单事件 `onchange` - 表单元素值变化(如输入框、下拉框) - 示例:`<select onchange="updateSelection(this.value)">...</select>` `onsubmit` - 表单提交前触发 - 示例:`<form onsubmit="return validateForm()">...</form>` `onfocus` / `onblur` - 元素获得焦点 / 失去焦点 - 示例:`<input onfocus="showHint()" onblur="hideHint()">` `oninput` - 输入内容实时触发 - 示例:`<input type="text" oninput="liveSearch(this.value)">` ##### 窗口/文档事件 `onload` - 页面或资源加载完成 - 示例:`<body onload="initPage()">` `onresize` - 窗口大小变化 - 示例:`<window onresize="adjustLayout()">` `onscroll` - 滚动条滚动 - 示例:`<div onscroll="trackScrollPosition()">可滚动区域</div>` `onbeforeunload` - 页面关闭前警告 - 示例:`<body onbeforeunload="return '确定离开吗?'">` ##### 其他常用事件 `ontouchstart` / `ontouchend` - 触摸设备开始/结束触摸 `onerror` - 资源加载失败(如 `<img onerror="setDefaultImage(this)">`) `ondragstart` / `ondrop` - 拖拽操作(需配合 `draggable="true"`) #### 2、使用`v-on:`绑定事件名 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.global.js"></script> </head> <body> <div id="app"> <button v-on:click="pointMe">点击</button> </div> <script> Vue.createApp({ data(){ return { } }, methods:{ pointMe(){ console.log("hello") } } }).mount('#app'); </script> </body> </html> ``` **注意**:绑定的事件需要在事件前面加`v-on:`,并且绑定事件触发的函数需要卸载Vue的`methods`属性下,可以使用`function methodName(){}`来声明(不推荐),也可以使用`methodName()=>{}`来声明或者省略箭头,使用`methodName(){}`直接声明(推荐) #### 3、使用`@`绑定事件名 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.global.js"></script> </head> <body> <div id="app"> <button v-on:click="pointMe">点击</button> <button @click="pointMe2">点击</button> <input type="text" @blur="blurfun" v-model="txt"> </div> <script> Vue.createApp({ data() { return { txt:'test' } }, methods: { pointMe() { console.log("hello"); }, pointMe2() { console.log("hello2"); }, blurfun(){ console.log("lose blur") } } }).mount('#app'); </script> </body> </html> ``` #### 4、传入参数 直接和正常使用函数一样 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.global.js"></script> </head> <body> <div id="app"> {{num}} <button @click="updateNum(1)">加</button> <button @click="updateNum(-1)">减</button> </div> <script> Vue.createApp({ data() { return { num: 0 } }, methods: { updateNum(value) { this.num += value; }, } }).mount('#app'); </script> </body> </html> ``` #### 5、通过事件切换样式 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .one { color: red; } .two { color: aqua; } </style> <script src="./js/vue.global.js"></script> </head> <body> <div id="app"> <p :class="className">这是一段文字,<span @click="changeColor">点我</span>可以切换颜色!</p> </div> <script> Vue.createApp({ data() { return { className: 'one' } }, methods: { changeColor() { this.className === 'one' ? this.className = 'two' : this.className = 'one'; } } }).mount('#app'); </script> </body> </html> ``` #### 6、接收事件对象指令 接收事件对象需要传入`$event`参数,并在函数形参列表中添加一个参数来承接事件对象,若函数只有一个参数且为事件对象时,那么可以不写`$event`直接用函数名调用即可。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.global.js"></script> </head> <body> <div id="app"> {{num}} <button @click="updateNum(1,$event)">加</button> <button @click="updateNum(-1,$event)">减</button> </div> <script> Vue.createApp({ data() { return { num: 0 } }, methods: { updateNum(value, event) { this.num += value; console.log(event); console.log(event.target); }, } }).mount('#app'); </script> </body> </html> ``` #### 7、事件修饰符 在JavaScript中可以使用 `event.preventDefault()` 或 `event.stopPropagation()` 等来阻止事件冒泡,或者阻止浏览器默认行为。那么Vue也提供了这样的功能,叫做事件修饰符。 什么是事件冒泡?当两个组件所占区域有重叠且都绑定点击事件时,点击上层组件也会触发下层组件的点击事件。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.global.js"></script> <style> .div1 { width: 200px; height: 200px; background: red; } .div2 { width: 100px; height: 100px; background: blue; } </style> </head> <body> <div id="app"> <div @click="func1" @contextmenu.prevent class="div1"> <div @click.stop="func2" class="div2"> </div> </div> </div> <script> Vue.createApp({ data() { return {} }, methods: { func1() { console.log("div1点击事件") }, func2() { console.log("div2点击事件") } } }).mount('#app'); </script> </body> </html> ``` **注意**:上述代码通过`事件.stop`来阻止了事件冒泡行为,通过`事件.prevent`来阻止了浏览器右键弹出菜单的默认事件行为。 ## 四、条件渲染指令 条件渲染指令可以根据条件来判断是否渲染/显示某些元素。 #### 1、`v-if` ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.global.js"></script> </head> <body> <div id="app"> <label> <input type="checkbox" v-model="isShow">显示 </label><br> <label><span v-text="num"></span> <button @click="changeNum(1)">加</button> <button @click="changeNum(-1)">减</button> </label> <div v-if="isShow">hello1</div> <div v-if="num===0">num为0</div> <div v-else-if="num===1">num为1</div> <div v-else-if="num===2">num为2</div> <div v-else>num不为0,1,2</div> </div> <script> Vue.createApp({ data() { return { isShow: false, num: 0 } }, methods: { changeNum(value) { this.num += value; } } }).mount('#app'); </script> </body> </html> ``` **注意**:`v-if`判断结构与Java判断语句结构一致,只是位置不同,`v-else-if`与`v-else`必须跟在`v-if`之后,`v-else`之后不需要加条件判断。 #### 2、`v-show` ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.global.js"></script> </head> <body> <div id="app"> <div v-show="isShow">这里使用v-show</div> </div> <script> Vue.createApp({ data() { return { isShow: false, } }, methods: {} }).mount('#app'); </script> </body> </html> ``` **注意**:`v-show`通过条件来设置元素是否为`display:none`,即使条件为假,元素也会被渲染出来。 #### 3、两者区别 | 对比维度 | `v-if` | `v-show` | | :------------------------------ | :----------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------- | | 核心机制 | **条件性渲染**:根据条件的真假,动态地**创建或销毁**DOM元素及其组件。 | **条件性显示**:无论条件真假,DOM元素始终会被**渲染**,只是通过CSS的 `display` 属性来切换显示/隐藏。 | | 编译与初始渲染 | **惰性的**:如果初始条件为 `false`,则元素不会被渲染,对应的生命周期钩子(如 `onMounted`)也不会被调用。 | **非惰性的**:无论初始条件如何,元素都会被编译并渲染到DOM中,只是初始为隐藏状态。相关的生命周期钩子会在组件挂载时执行。 | | 切换开销 | **高**:切换条件时,会触发组件的**创建和销毁**(包括生命周期钩子的调用),以及DOM的**添加和移除**操作。 | **低**:切换条件时,仅仅是切换CSS属性(`display: none/block`),不会涉及组件的销毁和重建。 | | 适用场景 | **运行时条件很少改变**,或者**需要惰性渲染**以提升初始加载性能的场景。例如:根据用户权限决定是否渲染某个功能模块。 | **需要频繁切换显示状态**的场景。例如:标签页切换、下拉菜单、模态框的显示/隐藏。 | | 与`v-else` / `v-else-if` 的配合 | **可以**:可以与 `v-else` 和 `v-else-if` 配合使用,实现“分支”逻辑。 | **不可以**:不能与 `v-else` 或 `v-else-if` 链式使用。 | | **性能考量** | 如果元素初始不需要显示,使用`v-if` 可以避免不必要的渲染开销,**优化初始加载性能**。 | 如果元素需要频繁切换,使用`v-show` 可以避免反复创建销毁带来的性能损耗,**优化运行时切换性能**。 | | 对`<template>` 标签的支持 | **支持**:可以用于 `<template>` 标签,来控制一组元素的渲染。 | **不支持**:不能用于 `<template>` 标签,只能用于实际的DOM元素。 | ## 五、循环遍历指令 `v-for`可以基于原始数据多次渲染元素或模板块。 #### 1、遍历对象属性 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.global.js"></script> </head> <body> <div id="app"> <p>编号:{{user.userId}}<br>姓名:{{user.userName}}<br>性别:{{user.userSex}}</p> <p><span v-for="(value,key,index) in user">{{index}}:{{key}}:{{value}}<br></span></p> </div> <script> Vue.createApp({ data() { return { user: { userID: 1, userName: '张三', userSex: '男' } } }, methods: {} }).mount('#app'); </script> </body> </html> ``` **注意**:`v-for`遍历对象语法为`* in Object`,若只需取出参数的值,`*`处只需写一个临时变量(变量名随意)来存储;若需取出对象属性名的同时取出值,则`*`处需要填写固定的格式`(value,key)`;若需取出对象属性名、属性值并按照属性定义顺序来输出索引,则`*`处需要填写固定的格式`(value,key,index)`。 #### 2、遍历数组 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.global.js"></script> </head> <body> <div id="app"> <ul> <!-- 若数组中某些值发生变化,则会重新渲染整个v-for --> <li v-for="(user,index) in userArr">{{index}}:{{user.userID}},{{user.userName}},{{user.userSex}}</li> <!-- 为遍历出来的元素添加唯一标识,这样如果数组内容中有更新,则通过标识直接更新该部分 --> <li :key="user.userId" v-for="(user,index) in userArr"> {{index}}:{{user.userID}},{{user.userName}},{{user.userSex}} </li> </ul> <button @click="changeArr">点击改变数据</button> </div> <script> Vue.createApp({ data() { return { userArr: [ { userID: 1, userName: '张三', userSex: '男' }, { userID: 2, userName: '李四', userSex: '男' }, { userID: 3, userName: '王五', userSex: '女' } ] } }, methods: { changeArr() { if (this.userArr[1].userName === '李四') this.userArr[1].userName = '赵六'; else this.userArr[1].userName = '李四'; } } }).mount('#app'); </script> </body> </html> ``` **注意**:若不为遍历出来每一项设上唯一标识,那么若数组中某些值发生变化,则会重新渲染整个v-for,若设置了唯一标识`:key="PKey"`(一般为对象字段的主键或唯一键,不推荐使用`index`),则通过标识直接更新该部分。 ## 六、综合案例:表格修改 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.global.js"></script> <style> #app { width: 500px; } table { width: 100%; border-collapse: collapse; } table tr th, table tr td { height: 35px; border-bottom: solid 1px #999; text-align: center; } </style> </head> <body> <div id="app"> <div> <table> <tr> <th>编号</th> <th>姓名</th> <th>年龄</th> <th>操作</th> </tr> <tr :key="t.pid" v-for="(t,index) in table"> <td v-text="t.pid"></td> <td v-text="t.name"></td> <td v-text="t.age"></td> <td> <button @click="deleteTable(index)">删除</button> </td> </tr> <tr> <td colspan="4"> <button @click="clearTable">清空表单</button> </td> </tr> </table> </div> <div> <h3>添加</h3> <label> 姓名:<input type="text" v-model="tmpName"> </label><br> <label> 年龄:<input type="text" v-model="tmpAge"> </label><br> <button @click="addTable(tmpName,tmpAge)">添加</button> </div> </div> <script> Vue.createApp({ data() { return { table: [], tmpName: '', tmpAge: '', tmpPid: 0 } }, methods: { addTable(n, a) { this.table.push({ pid: ++this.tmpPid, name: n, age: a }); this.tmpName = ''; this.tmpAge = ''; }, deleteTable(id) { // 过滤掉pid===id的 // this.table = this.table.filter(item => item.pid !== id); // 通过动态下标删除 this.table.splice(id, 1); }, clearTable() { this.table.splice(0); this.tmpPid = 0 } } }).mount('#app'); </script> </body> </html> ``` 最后修改:2025 年 10 月 23 日 © 允许规范转载 打赏 赞赏作者 支付宝微信 赞 👆请简单粗暴地爱我。