Vue3（事件监听、渲染以及遍历渲染）
·
一、事件监听：
在vue3中，事件监听是通过v-on指令（或简写@）捕获DOM元素或者组件触发的事件，并执行对于处理函数机制，核心是实现“用户操作”与“代码响应”的绑定。
可以理解为给按钮、输入框元素装一个监听器，当用户点击、输入时，监听器就触发你提前写好的代码。
实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件监听v-on</title>
</head>
<body>
<div id="app" style="border: 3px solid red; width: 500px; height: 300px;">
响应式变量b = {{ b }}
<br>
<button v-on:click="change">
标准形式：点击我修改数据
</button>
<!-- v-on模板指令的简写形式： @ -->
<button @click="change">
简写形式:点击我修改数据
</button>
<!-- 监听单个键盘按下的事件 -->
<br>
监听单个键盘<input type="text" v-on:keydown.enter="change">
<!-- 监听组合键盘按下的事件 -->
<br>
监听组合键盘<input type="text" v-on:keydown.ctrl.enter="change">
</div>
<script type="module">
// 按需导入要用到的模块，以体现vue渐进式的思想
import {createApp, ref, reactive} from './vue.esm-browser.js';
createApp({
setup() {
// 定义响应式变量
const b = ref(1);
console.log(`b的类型为 ${typeof b}, 值为${ b}`);
// 定义函数（方法）
const change = () => {
b.value = b.value + 1;
console.log(`b的类型为 ${typeof b}, 值为${b.value}`);
}
// 所有需要在HTML中渲染的数据都要暴露出去
return {b, change}
}
}).mount("#app");
</script>
</body>
</html>
二、条件渲染：
在Vue3中， 简单说就是给元素加“显示开关”，数据为 true 时元素显示在页面上，为 false 时则不显示（甚至不渲染到DOM中）。
- v-if：直接控制元素是否被渲染到DOM，适合条件不频繁切换的场景（比如登录/未登录状态的界面切换）。
- v-show：通过CSS的 display: none 控制元素显示/隐藏，元素始终存在于DOM中，适合条件频繁切换的场景（比如频繁点击显示/隐藏的弹窗）。
实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>条件渲染v-show和v-if</title>
</head>
<body>
<div id="app" style="border: 3px solid red; width: 500px; height: 300px;">
<h3> 标记是否渲染下面节点的布尔值： {{web.show}} </h3>
<button @click="change">
点击我切换布尔值
</button>
<!--
Vue实例用v-show指令，监听布尔变量的改变，来控制节点是否被渲染。
v-show指令原理是通过display:none来实现节点是否渲染。可以F12检查源代码查看。
-->
<!-- <p v-show="web.show">xxxxxxxxxx学校v-show</p> -->
<!--
Vue实例用v-if指令，监听布尔变量的改变，来控制节点是否被渲染。
v-if指令原理是通过增删节点，来实现节点是否渲染。可以F12检查源代码查看。
-->
<!-- <p v-if="web.show">xxxxxx学校v-if</p> -->
<h3> 网站用户数： {{web.user}} </h3>
<button @click="add">
点击我增加网站用户数
</button>
<p v-if="web.user <= 500">根据用户数评级：你是小型网站</p>
<p v-else-if="web.user > 500 && web.user <= 1000">根据用户数评级：你是中型网站</p>
<p v-else-if="web.user > 1000 && web.user <= 2000">根据用户数评级：你是大型网站</p>
<p v-else>根据用户数评级：你是超级网站</p>
<!-- 我发的那本电子书，里面的语法是“选项式API的语法”，课堂上讲的是最新版本的“组合式API的语法” -->
</div>
<script type="module">
// 按需导入要用到的模块，以体现vue渐进式的思想
import {createApp, ref, reactive} from './vue.esm-browser.js';
createApp({
setup() {
// 定义响应式变量
const web = reactive({
show: true,
user:100
});
// 定义函数（方法）
const change = () => {
web.show = !web.show;
}
const add = () => {
web.user += 100;
}
// 所有需要在HTML中渲染的数据都要暴露出去
return {web, change, add}
}
}).mount("#app");
</script>
</body>
</html>
三、遍历渲染：
在Vue3中， 简单来说就是：有一个列表数据（比如10条商品信息），用 v-for “读一遍”数据，每读一条就自动创建一个展示该商品的DOM元素，无需手动写10遍，避免重复写相同结构的代码。
遍历数组：语法是 v-for="(item, index) in 数组名"
item 是当前循环项， index 是其索引（可选），比如用数组渲染商品列表。
遍历对象：语法是 v-for="(value, key, index) in 对象名"
分别对应属性值、属性名和索引，比如展示用户信息（姓名、年龄等）。
实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>遍历渲染v-for</title>
</head>
<body>
<div id="app" style="border: 3px solid red; width: 500px; height: 300px;">
<!-- 实验1： 遍历对象的值，根据值的个数渲染对应的节点数出来 -->
<ul>
<li v-for="v in data.user">
{{v}}
</li>
</ul>
<!-- 实验2： 遍历对象的“值和键”，根据元素的个数渲染对应的节点数出来 -->
<ul>
<li v-for="(v,k) in data.user">
{{k}} : {{v}}
</li>
</ul>
<!-- 实验3： 遍历对象的“值,键,索引”，根据元素的个数渲染对应的节点数出来
注意：获取到的数据一定是按照“值,键,索引”的顺序排列
-->
<ul>
<li v-for="(v,k,i) in data.user">
{{i}} : {{k}} : {{v}}
</li>
</ul>
<!-- 实验4： 遍历数组的值，根据值的个数渲染对应的节点数出来 -->
<ul>
<li v-for="v in data.age">
{{v}}
</li>
</ul>
<!-- 实验5： 遍历数组的“值,索引”，根据元素的个数渲染对应的节点数出来 -->
<ul>
<li v-for="(v,i) in data.age">
{{i}} : {{v}}
</li>
</ul>
<!-- 实验5： 【嵌套使用】遍历渲染v-for嵌套条件渲染v-if -->
<ul>
<div v-for="(v,i) in data.age">
<li v-if="i!=2" style="color: red;">
{{i}} : {{v}}
</li>
</div>
</ul>
</div>
<script type="module">
// 按需导入要用到的模块，以体现vue渐进式的思想
import {createApp, ref, reactive} from './vue.esm-browser.js';
createApp({
setup() {
// 定义响应式数据
const data = reactive({
user: {name:"刘磊", gender:"男", area:"云中医"},
age: ["18岁","19岁","20岁"]
});
// 所有需要在HTML中渲染的数据都要暴露出去
return {data}
}
}).mount("#app");
</script>
</body>
</html>
Agent 垂直技术社区，欢迎活跃、内容共建。
更多推荐
5
0- 0
已为社区贡献1条内容
所有评论(0)