前端框架Vue3——响应式数据，v-on，v-show和v-if，v-for，v-bind

        Vue的定义为渐进式的JavaScript框架。所谓渐进式，是指其被设计 为可以自底向上逐层应用。我们可以只使用Vue框架中提供的某层的功 能，也可以与其他第三方库整合使用。当然，Vue本身也提供了完整的 工具链，使用其全套功能进行项目的构建也非常简单。Vue的渐进式性质使其使用方式变得非常灵活，在使用时，我们可以使用其完整的框架，也可以只使用部分功能。

一、响应式数据

        响应式是Vue 框架重要的特点，在开发中，对 Vue 响应式特性的使 用非常频繁，常见的是通过数据绑定的方式将变量的值渲染到页面中，当变量发生变化时，页面对应的元素也会更新。
 1.ref方法

   ref是Vue3中用于创建响应式数据的方法之一。它主要用于创建基本数据类型（如Number、String、Boolean等）的响应式数据。ref接受一个内部值作为参数，并返回一个带有.value属性的响应式对象。

例如：

<!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"><p>{{ msg }}</p></div><script type="module">import {createApp, ref} from "./vue.esm-browser.js"  //模块化开发方式createApp({setup(){let msg = ref;// 返回一个对象类型的数据return { msg: "成功创建第一个Vue应用程序!" ,   }}}).mount("#app");</script>
</body>
</html>

效果如下（运行需安装live-server插件）：

2.reactive方法

    reactive用于创建复杂的响应式数据对象，如对象或数组。它将一个普通的 JavaScript 对象转换为响应式对象。被reactive包裹的对象，其所有的属性都将变成响应式的。

例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>让数据变成响应式</title>
</head><body><div id="app"><p>{{ web.url }}</p><button @click="change">点击我更换网址</button></div><script type="module">import {createApp, reactive} from "./vue.esm-browser.js"  //模块化开发方式createApp({setup(){const web = reactive({title: "百度一下，你就知道",url: "www.baidu.com"});console.log(typeof web, web);const change = () => {web.url += "-->数据被修改";}// 返回一个对象类型的数据return {  web,change}}}).mount("#app");</script></body>
</html>

效果如下（运行需安装live-server插件）：

                  点击按钮前                                                             点击按钮后

二、事件绑定指令v-on

   v-on是 Vue.js 中用于绑定事件的指令。它可以将 DOM 事件（如click、keydown、submit等）绑定到组件实例的方法上。

enter space tab 按键修饰符

keyup是在用户松开按键时才触发

keydown是在用户按下按键时立即触发

这使得在用户与页面进行交互（如点击按钮、输入文字等）时，能够触发相应的 JavaScript 代码来处理业务逻辑。

<!-- v-on:click 表示在 button 元素上监听 click 事件 -->
<button v-on:click="edit">修改</button> <br><!-- @click 简写形式 -->
<button @click="add(20, 30)">加法</button> <br>

可以通过@keyup.＋键盘内的某个键设置点击该按键或者组合键触发函数，代码如下：

回车 <input type="text" @keyup.enter="add(40, 60)"> <br>
空格 <input type="text" @keyup.space="add(20, 30)"> <br>
Tab <input type="text" @keydown.tab="add(10, 20)"> <br>
w <input type="text" @keyup.w="add(5, 10)"> <br><!-- 组合快捷键 -->
Ctrl + Enter <input type="text" @keyup.ctrl.enter="add(40, 60)"> <br>
Ctrl + A <input type="text" @keyup.ctrl.a="add(20, 30)">

效果如下：

                 未按键版                                              按键版

以下是一个v-on指令事件绑定的例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绑定事件</title>
</head><body><div id="app"><h3>{{ msg }}</h3><h3>{{ web.url }}</h3><h3>{{ web.user }}</h3><h3>{{ sub(100, 20) }}</h3><!-- v-on:click 表示在 button 元素上监听 click 事件 --><button v-on:click="edit">修改</button> <br><!-- @click 简写形式 --><button @click="add(20, 30)">加法</button> <br></div><script type="module">import { createApp, reactive, ref } from './vue.esm-browser.js'createApp({setup() {let msg = "成功启动!!!";const web = reactive({title: "百度",url: "baidu.com",user: 0});const edit = () => {web.url = "www.baidu.com"msg = "云中医" //错误示例 不能直接改变msg的值,因为msg是一个普通变量, 不是响应式数据console.log(`msg修改为: ${msg}`); //从控制台打印信息可以知道确实改变了，但是模板没有响应更新（非响应式数据）    }const add = (a, b) => {web.user += a + b}const sub = (a, b) => {return a - b}return {msg, //普通变量, 非响应式数据, 在模板中普通变量不会自动更新web, //响应式数据edit, //方法add,sub,}}}).mount("#app")</script></body>
</html>

效果如下：

             未点击版                                                         点击版

三、条件渲染指令v-show和v-if

   v-show是 Vue.js 中的一个指令，用于根据表达式的值来控制元素的显示和隐藏。当表达式的值为true时，元素会显示；当表达式的值为false时，元素会隐藏。它通过修改元素display CSS 属性来实现显示和隐藏的效果。

例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>节点的条件渲染</title>
</head><body><div id="app"><h3>显示状态: {{ web.show }}</h3><!-- Vue处理v-show变化时，是用display:none实现隐藏的（可以通过F12检查源代码，当点击时，源码会加入display:none） --><p v-show="web.show">广东云浮中医药职业学院计算机学院v-show</p>   </div><script type="module">import { createApp, reactive, ref } from './vue.esm-browser.js'createApp({setup() {const web = reactive({   // 响应式数据show: true,user: 500});return {web,}}}).mount("#app");</script></body>
</html>

效果如下：

①当表达式的值为true时，元素正常显示：

②当表达式的值为false时，元素被隐藏：

   v-if也是用于条件渲染的指令。它根据表达式的值来决定是否渲染元素。如果表达式的值为true，元素会被渲染到 DOM 中；如果表达式的值为false，元素不会被渲染。

同样是上面的例子，以v-if来实现：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>节点的条件渲染</title>
</head><body><div id="app"><h3>显示状态: {{ web.show }}</h3><!-- Vue处理v-if变化时，是通过删除节点实现隐藏的（可以通过F12检查源代码，当点击时，源码会删除节点） 。当遇到需要频繁显示和隐藏的场景时，不是合使用v-if， 因为频繁增删节点，会导致渲染效率下降 --><p v-if="web.show">广东云浮中医药职业学院基础学院v-if</p><button @click="toggle">切换显示状态</button></div><script type="module">import { createApp, reactive, ref } from './vue.esm-browser.js'createApp({setup() {const web = reactive({   // 响应式数据show: true,user: 500});const toggle = () => {web.show = !web.show;   // 这个布尔变量被切换后，模板中用到的地方会自动更新，进而被v-show捕获}return {web,toggle,}}}).mount("#app");</script></body>
</html>

效果如下：

四、遍历指令v-for

   v-for是 Vue.js 中用于遍历数组或对象并渲染列表的指令。它可以根据数据源（如数组、对象、数字范围等）的内容来动态地生成多个相同结构的 DOM 元素。

1.遍历一个对象的数值：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>遍历指令</title><style>.textColor{color: red;}</style>
</head><body><div id="app"><!-- 遍历对象的值 --><h4>遍历对象的值。</h4><ul><li v-for="value in data.user">{{ value }}</li></ul></div><script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const data = reactive({                    //对象user: { name: "李雷",   gender: "女" }});return {data}}}).mount("#app")</script></body>
</html>

效果如下：

2.遍历对象的值和索引 （注意：写指令时，先值后索引）：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>遍历指令</title><style>.textColor{color: red;}</style>
</head><body><div id="app"><!-- 遍历对象的值和索引。 注意：写指令时，先值后索引 --><h4>遍历对象的值和索引。 注意：写指令时，先值后索引</h4><ul><li v-for="(value, index) in data.number">{{ index }} : {{ value }}</li></ul>    </div><script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const data = reactive({//数组number: ["十",  "十一",  "十二"],                     });return {data}}}).mount("#app")</script></body>
</html>

效果如下：

3.遍历对象的值和键（ 注意：写指令时，先值后键）：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>遍历指令</title><style>.textColor{color: red;}</style>
</head><body><div id="app"><!-- 遍历对象的值和键。 注意：写指令时，先值后键 --><h4>遍历对象的值和键。 注意：写指令时，先值后键</h4><ul><li v-for="(value, key) in data.user">{{ key }} : {{ value }}</li></ul>    </div><script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const data = reactive({//对象user: { name: "李雷",   gender: "女" }                     });return {data}}}).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>遍历指令</title><style>.textColor{color: red;}</style>
</head><body><div id="app"><!-- 遍历对象的值，键和索引。 注意：写指令时，先值再键后索引 --><h4>遍历对象的值，键和索引。 注意：写指令时，先值再键后索引</h4><ul><li v-for="(value, key, index) in data.user">{{ index }} : {{ key }} : {{ value }}</li></ul>    </div><script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const data = reactive({//对象user: { name: "李雷",   gender: "女" }                     });return {data}}}).mount("#app")</script></body>
</html>

效果如下：

5.指令嵌套： 先用v-for指令遍历对象，然后展示符合v-if条件的节点：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>遍历指令</title><style>.textColor{color: red;}</style>
</head><body><div id="app"><h4>指令嵌套： 先用v-for指令遍历对象，然后展示符合v-if条件的节点</h4><ul><!--注： <template> 标签可以用来包装多个元素或者多行代码, 不会在页面中渲染  --><template v-for="(value, key, index) in data.user"><li v-if="index == 1">  {{ index }} : {{ key }} : {{ value }}</li>           </template></ul>    </div><script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const data = reactive({//对象user: { name: "李雷",   gender: "女" }                     });return {data}}}).mount("#app")</script></body>
</html>

效果如下：

五、属性动态化指令v-bind

  v-bind是 Vue.js 中的一个指令，用于动态地绑定一个或多个属性到元素上。它允许你根据组件的数据来改变元素的属性值，比如src、href、class、style等属性。通过v-bind，可以实现数据驱动的属性变化，使得视图能够随着数据的改变而自动更新相关属性。

语法为v-bind:属性名="表达式"，不过在实际开发中，更常用的是缩写形式:属性名="表达式"。

1.iuput标签动态属性绑定
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>节点的动态属性(单向绑定)</title><style>.textColor{color: red;}</style>
</head><body><div id="app"><h3>  iuput标签动态属性绑定    v-bind:value </h3><input type="text" v-bind:value="web.str"><h3>  iuput标签动态属性绑定(简写形式)   :str </h3><input type="text" :value="web.str"><br><button @click="change">修改</button></div><script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const web = reactive({str: "w",})const change = () => {web.str += "w";}return {web,change}}}).mount("#app")</script></body>
</html>

效果如下：

               未点击修改键                                                点击修改键（根据点击次数叠加）

2.img标签动态属性绑定
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>节点的动态属性(单向绑定)</title><style>.textColor{color: red;}</style>
</head><body><div id="app">    <h3>  img标签动态属性绑定(简写形式)    :src </h3><img :src="web.img"><br><button @click="change">修改</button></div><script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const web = reactive({img: "./img_src/logo0.png",})const change = () => {web.img=`./img_src/logo1.png`;}return {web,change}}}).mount("#app")</script></body>
</html>

效果如下：

3.b标签动态属性绑定
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>节点的动态属性(单向绑定)</title><style>.textColor{color: red;}</style>
</head><body><div id="app"><h3>  b标签动态属性绑定(简写形式)   :class</h3><h4>  注：通过布尔值控制某个类名是否存在，进而控制对应的CSS样式是否被选中生效</h4><b :class="{textColor:web.fontStatus}">广东云浮中医药职业学院</b><br><button @click="change">修改</button></div><script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const web = reactive({fontStatus: false})const change = () => {web.fontStatus = !web.fontStatus;}return {web,change}}}).mount("#app")</script></body>
</html>

效果如下：

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

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

相关文章

实验二 系统响应及系统稳定性

实验二 系统响应及系统稳定性

实验目的 &#xff08;1&#xff09;学会运用Matlab 求解离散时间系统的零状态响应&#xff1b; &#xff08;2&#xff09;学会运用Matlab 求解离散时间系统的单位取样响应&#xff1b; &#xff08;3&#xff09;学会运用Matlab 求解离散时间系统的卷积和。 实验原理及实…
阅读更多...
.NET Core发布网站报错 HTTP Error 500.31

.NET Core发布网站报错 HTTP Error 500.31

报错如图&#xff1a; 解决办法&#xff1a; 打开任务管理器》》服务》》找到这仨服务&#xff0c;右键启动即可&#xff0c;如果已经启动了就重启&#xff1a;
阅读更多...
麒麟安全增强-kysec

麒麟安全增强-kysec

DAC: 自主访问控制是linux下默认的接入控制机制，通过对资源读、写、执行操作，保证系统安全 MAC：安全接入控制机制，由操作系统约束的访问控制，默认情况下，MAC不允许任何访问，用户可以自定义策略规则制定允许什么 ，从而避免很多攻击。 MAC强制访问控制常见的实现方式：…
阅读更多...
Otter 安装流程

Otter 安装流程

优质博文&#xff1a;IT-BLOG-CN 一、背景 随着公司的发展&#xff0c;订单库的数据目前已达到千万级别&#xff0c;需要进行分表分库&#xff0c;就需要对数据进行迁移&#xff0c;我们使用了otter&#xff0c;这里简单整理下&#xff0c;otter 的安装过程&#xff0c;希望对…
阅读更多...
如何解决Jupyter command `jupyter-contrib` not found.

如何解决Jupyter command `jupyter-contrib` not found.

目录 (base) C:\Users\hello>pip show jupyter_contrib_nbextensions Name: jupyter-contrib-nbextensions Version: 0.7.0 Summary: A collection of Jupyter nbextensions. Home-page: https://github.com/ipython-contrib/jupyter_contrib_nbextensions.git Author: ipyt…
阅读更多...
Gitee markdown 使用方法（持续更新）

Gitee markdown 使用方法（持续更新）

IPKISS 获取仿真器件的名称 引言正文标题换行第一种------在行末尾手动键入两个空格第二种------额外换行一次&#xff0c;即两行中间留一个空行 缩进与反缩进代码块行内代码添加图片添加超链接 加粗&#xff0c;倾斜&#xff0c;加粗倾斜 引言 有些保密性的文件或者教程&…
阅读更多...
Adobe Illustrator 2024 安装教程与下载分享

Adobe Illustrator 2024 安装教程与下载分享

介绍一下 下载直接看文章末尾 Adobe Illustrator 是一款由Adobe Systems开发的矢量图形编辑软件。它广泛应用于创建和编辑矢量图形、插图、徽标、图标、排版和广告等领域。以下是Adobe Illustrator的一些主要特点和功能&#xff1a; 矢量绘图&#xff1a;Illustrator使用矢量…
阅读更多...
golang学习5

golang学习5

为结构体添加方法 异常处理过程
阅读更多...
分布式光伏与储能协调控制策略的应用分析

分布式光伏与储能协调控制策略的应用分析

安科瑞汪洋/汪小姐/汪女士---Acrelwy 摘 要&#xff1a;针对光伏发电的随机性、波动性、间歇性特征,研发了分布式光伏与储能协调控制策略,并在镇江地调开展分布式电源光储协控试点应用&#xff0c;开展光储协调控制策略研究&#xff0c;实时采集分布式光伏电站、储能电站、试点…
阅读更多...
sd webui整合包怎么安装comfyui

sd webui整合包怎么安装comfyui

环境： sd webui整合包 comfyui 问题描述： sd webui整合包怎么安装comfyui 扩展安装不成功 解决方案： 1.直接下载 ，解压到SD文件夹里（或者git拉一下） 2.ComfyUI模型共享：如果本机部署过Webui，那么ComfyUI可以与WebUI公用一套模型，防止复制大量模型浪费空间 将…
阅读更多...
Utf8Json 枚举序列化为整型（默认string）

Utf8Json 枚举序列化为整型（默认string）

Utf8Json 枚举序列化为整型 找到 StandardResolver.cs, 更换EnumResolver. Default 为EnumResolver. UnderlyingValue
阅读更多...
网络基础 - 地址篇

网络基础 - 地址篇

一、IP 地址 IP 协议有两个版本&#xff0c;IPv4 和 IPv6IP 地址(IPv4 地址)是一个 4 字节&#xff0c;32 位的正整数&#xff0c;通常使用 “点分十进制” 的字符串进行表示&#xff0c;例如 192.168.0.1&#xff0c;用点分割的每一个数字表示一个字节&#xff0c;范围是 0 ~…
阅读更多...
Vue3+SpringBoot3+Sa-Token+Redis+mysql8通用权限系统

Vue3+SpringBoot3+Sa-Token+Redis+mysql8通用权限系统

sa-token支持分布式token 前后端代码&#xff0c;地球号: bright12389
阅读更多...
Leetcode 336 回文对

Leetcode 336 回文对

示例 1&#xff1a; 输入&#xff1a;words ["abcd","dcba","lls","s","sssll"] 输出&#xff1a;[[0,1],[1,0],[3,2],[2,4]] 解释&#xff1a;可拼接成的回文串为 ["dcbaabcd","abcddcba","sl…
阅读更多...
基于Vue+SpringBoot的考研学习分享平台设计与实现

基于Vue+SpringBoot的考研学习分享平台设计与实现

摘要 考研学习分享平台是一个专注于为考研学子提供全面学习资源和经验分享的互动社区。这里汇聚了众多考研成功者的经验心得&#xff0c;涵盖各个学科领域的备考技巧和策略。平台不仅提供丰富的学习资料&#xff0c;还设有在线答疑、模拟考试等实用功能&#xff0c;帮助考生高…
阅读更多...
【C++】C++11新特性详解：可变参数模板与emplace系列的应用

【C++】C++11新特性详解：可变参数模板与emplace系列的应用

C语法相关知识点可以通过点击以下链接进行学习一起加油&#xff01;命名空间缺省参数与函数重载C相关特性类和对象-上篇类和对象-中篇类和对象-下篇日期类C/C内存管理模板初阶String使用String模拟实现Vector使用及其模拟实现List使用及其模拟实现容器适配器Stack与QueuePriori…
阅读更多...
TCP为什么需要三次握手？两次握手或四次握手可以吗？

TCP为什么需要三次握手？两次握手或四次握手可以吗？

&#xff08;1&#xff09;三次握手可以保证双方具有接收和发送的能力 第一次握手服务端可以确认客户端的发送能力和服务端的接收能力是正常的&#xff1b;第二次握手客户端可以确认客户端和服务端的收发能力是正常的&#xff0c;但是服务端无法确认客户端的接收能力是正常的&…
阅读更多...
nature communications论文 解读

nature communications论文 解读

题目《Transfer learning with graph neural networks for improved molecular property prediction in the multi-fidelity setting》 这篇文章主要讨论了如何在多保真数据环境&#xff08;multi-fidelity setting&#xff09;下&#xff0c;利用图神经网络&#xff08;GNNs&…
阅读更多...
Cmakelist.txt之Linux-redis配置

Cmakelist.txt之Linux-redis配置

1.cmakelist.txt cmake_minimum_required(VERSION 3.16) ​ project(redis_linux_test LANGUAGES C) ​ ​ ​ add_executable(redis_linux_test main.c) ​ # 设置hiredis库的头文件路径和库文件路径 set(Hiredis_INCLUDE_DIR /usr/local/include/hiredis) set(Hiredis_LIBRA…
阅读更多...
基于Qt/C++/Opencv实现的一个视频中二维码解析软件

基于Qt/C++/Opencv实现的一个视频中二维码解析软件

本文详细讲解了如何利用 Qt 和 OpenCV 实现一个可从视频和图片中检测二维码的软件。代码实现了视频解码、多线程处理和界面更新等功能&#xff0c;是一个典型的跨线程图像处理项目。以下分模块对代码进行解析。 一、项目的整体结构 项目分为以下几部分&#xff1a; 主窗口 (M…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023