vue入门到实战 三

目录

3.1 v-bind

3.1.1 v-bind指令用法

​编辑3.1.2 使用v-bind绑定class

3.1.3 使用v-bind绑定style

3.2.1 v-if指令

3.2.1 v-if指令

3.2.2 v-show指令

​3.3 列表渲染指令v-for

3.3.1 基本用法

3.3.2 数组更新

3.3.3 过滤与排序

3.4 事件处理

3.4.1 使用v-on指令监听事件

3.4.2 使用$event访问原生的DOM事件

3.4.3 事件修饰符

3.5 表单与v-model

3.5.1 基本用法

3.5.2 修饰符


3章 内置指令

3.1 v-bind

3.1.1 v-bind指令用法

v-bind的基本用途是动态更新HTML元素上的属性,比如idclass等。

3-1】使用v-bind指令绑定超链接的href属性和图片的src属性。

3.1.2 使用v-bind绑定class

1.对象语法

传给:classv-bind:class的简写)一个对象,可以动态地切换class属性值。示例代码如下:

  <div :class="{ active: isActive }"></div>

可以在对象中传入更多字段来动态切换多个class。此外,:class指令也可以与普通的class属性同时存在。示例代码如下:

<div class="static" :class="{ active: isActive, 'text-danger': hasError }"></div>

2.数组语法

当需要多个class时,可以把一个数组与:class绑定,以应用一个class列表。示例代码如下:

<div :class="[activeClass, errorClass]"></div>

如果需要根据条件切换列表中的class,可以使用三元表达式实现。示例代码如下:

<div :class="[isActive ? activeClass : '', errorClass]"></div>

3.数组中嵌套对象

当有多个条件class时,在数组中使用三元表达式有些繁琐。所以在数组语法中也可以使用对象语法。示例代码如下:

<div :class="[{ 'active': isActive }, errorClass]"></div>

3.1.3 使用v-bind绑定style

使用:style可以给HTML元素绑定内联样式,方法与:class类似,也有对象语法和数组语法。:style的对象语法十分直观,看起来像在元素上直接写CSS,但其实是一个JavaScript对象。CSS属性名可以用驼峰式或短横线分隔来命名。

3.2.1 v-if指令

3.2.1 v-if指令

JavaScript的条件语句ifelseelse if类似,Vue.js的条件指令v-if也可以根据表达式的值渲染或销毁元素/组件。

v-if条件渲染指令必须将它添加到一个元素上。但是如果想包含多个元素呢?此时可以使用<template>元素(模板占位符)帮助我们包裹元素,并在上面使用v-if。最终的渲染结果将不包含<template>元素。

3.2.2 v-show指令

v-show指令的用法基本与v-if一样,也是根据条件展示元素,例如:<h1 v-show="yes">一级标题</h1>。不同的是,v-if每次都会重新删除或创建元素,而带有v-show的元素始终会被渲染并保留在DOM中,只是切换元素的display:none样式。所以,v-if有更高的切换消耗,而v-show有更高的初始渲染消耗。因此,如果需要频繁切换,v-show较好;如果在运行时条件不大可能改变,v-if较好。另外,v-show不支持<template>元素,也不支持v-else

3.3 列表渲染指令v-for

3.3.1 基本用法

可以使用v-for指令遍历一个数组或对象,它的表达式需结合in来使用,形式为item in items,其中items是源数据,而item是被迭代集合中元素的别名。v-for还支持一个可选的参数作为当前项的索引。

3.3.2 数组更新

Vue.js框架的核心是数据与视图的双向绑定,所以使用v-for循环遍历并渲染数组时,数组变化将触发视图更新。

push()方法可向数组的末尾添加一个或多个元素,并返回新的长度。

pop()方法用于删除并返回数组的最后一个元素。

unshift()方法可向数组的开头添加一个或更多元素,并返回新的长度。

shift()方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。

splice()方法用于添加或删除数组中的元素。如果仅删除一个元素,则返回一个元素的数组。如果未删除任何元素,则返回空数组。

sort()方法用于对数组的元素进行排序。排序顺序可以是字母或数字,并按升序或降序。默认排序顺序为按字母升序。

reverse()方法用于颠倒数组中元素的顺序。

3.3.3 过滤与排序

有时,需要显示一个经过过滤或排序后的数组,而不实际变更或重置原始数据。在这种情况下,可以使用计算属性来返回过滤或排序后的数组。

3.4 事件处理

3.4.1 使用v-on指令监听事件

所有的事件处理都离不开事件监听器,在Vue.js中可以使用v-on指令给HTML元素添加一个事件监听器,通过该指令调用在Vue实例中定义的方法。

鼠标事件
click在元素上按下并释放任意鼠标按钮
contextmenu                        右键单击
dblclick双击鼠标
mousedown        按下鼠标任意键
mouseenter指针移到有事件监听的元素
mouseleave指针移除元素外(不冒泡)
mousemove指针在元素内移动时持续触发
mouseover指针移到有事件监听的元素或者它的子元素
mouseout        指针移除元素,或者移到它的子元素
mouseup在元素上按下并释放任意鼠标按键
select有文本被选中
wheel滚轮向任意方向滚动

键盘事件
keydown按下任意按键
keypress除(shift、fn、caplock外)任意键按住
keyup释放任意键
表单事件
reset        点击重置按钮
submit点击提交按钮

3.4.2 使用$event访问原生的DOM事件

Vue.js中,有时需要访问原生的DOM事件。Vue.js提供了一个特殊变量$event,用于访问原生的DOM事件。

3.4.3 事件修饰符

修饰符是一种强大的工具,它们允许我们以简洁明了的方式修改指令的行为

为解决该问题,Vue.jsv-on提供了事件修饰符。修饰符是由点开头的指令后缀表示。Vue.js支持的修饰符有.stop.prevent.capture.self.once以及.passive。用法是在@绑定的事件后加小圆点“.,再跟修饰符。

下面是原生的js方法阻止页面跳转

  • .stop :阻止事件冒泡到父元素
  • .prevent:阻止默认事件发生
  • .capture:使用事件捕获模式
  • 举个例子,A是B的父节点,A和B都有各自的点击事件,当点击B时,A和B的点击事件都会响应,响应顺序是B->A,当使用.capture修饰符后,说明使用捕获模式,响应顺序是A->B,代码如下:
  • .self:只有元素自身触发事件才执行。(冒泡或捕获的都不执行)
  • 举个例子,A是B的父节点,B是C的父节点,A和B和C都有各自的点击事件,当点击C时,A和B和C的点击事件都会响应。如果点击C的时候,不让B响应事件,让A响应事件,该如何处理?

    这就用到.self修饰符了,当点击C的事件冒泡时会自动跳过使用.self修饰符元素B,因为点击事件event.target是C,并不是B。

  • .once:只执行一次

3.5 表单与v-model

3.5.1 基本用法

表单用于向服务器传输数据,较为常见的表单控件有:单选多选下拉选择输入框等,用表单控件可以完成数据的录入、校验、提交等。Vue.jsv-model指令在表单<input><textarea><select>元素上创建双向数据绑定ModelView以及ViewModel)。使用v-model指令的表单元素将忽略该元素的valuecheckedselected等属性初始值,而是将当前活动的Vue实例的数据作为数据来源。所以,使用v-model指令时,应通过JavaScriptVue实例的data选项中声明初始值

3.5.2 修饰符

默认情况下,v-model在每次input事件触发后将输入框的值与数据进行同步。如果不想在每次input事件触发后同步,可以添加lazy修饰符,从而转为在change事件后进行同步。

<input v-model.lazy="msg"/>

先给出结论:当添加.lazy修饰符之后,改变input框中的内容并不会直接同步到绑定的msg中,当点击回车或者输入框失去焦点后再进行同步。

 

<input v-model.number="age" type="number" />

默认情况下,input输入框中无论输入的是数字还是字符串,都会被当做字符串处理,但是当我们想处理的是数字类型的数据时,.number修饰符就能把数据类型改成number
未加修饰符时,数字类型也被当做字符串

<input v-model.trim="msg" />

去除掉数据的前后空格,中间的空格不去掉

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

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

相关文章

《苍穹外卖》项目学习记录-Day10订单状态定时处理

利用Cron表达式生成器生成Cron表达式 1.处理超时订单 查询订单表把超时的订单查询出来&#xff0c;也就是订单的状态为待付款&#xff0c;下单的时间已经超过了15分钟。 //select * from orders where status ? and order_time < (当前时间 - 15分钟) 遍历集合把数据库…

解决MacOS安装软件时提示“打不开xxx软件,因为Apple无法检查其是否包含恶意软件”的问题

macOS 系统中如何开启“任何来源”以解决安装报错问题&#xff1f; 大家好&#xff01;今天我们来聊聊在使用 macOS 系统 时&#xff0c;遇到安装应用软件时出现报错的情况。这种情况常常发生在安装一些来自第三方开发者的应用时&#xff0c;因为 macOS 会默认阻止不明开发者的…

【FreeRTOS 教程 六】二进制信号量与计数信号量

目录 一、FreeRTOS 二进制信号量&#xff1a; &#xff08;1&#xff09;二进制信号量作用&#xff1a; &#xff08;2&#xff09;二进制信号量与互斥锁的区别&#xff1a; &#xff08;3&#xff09;信号量阻塞时间&#xff1a; &#xff08;4&#xff09;信号量的获取与…

C++模板编程——可变参函数模板之折叠表达式

目录 1. 什么是折叠表达式 2. 一元左折 3. 一元右折 4. 二元左折 5. 二元右折 6. 后记 上一节主要讲解了可变参函数模板和参数包展开&#xff0c;这一节主要讲一下折叠表达式。 1. 什么是折叠表达式 折叠表达式是C17中引入的概念&#xff0c;引入折叠表达式的目的是为了…

DeepSeek回答禅宗三重境界重构交易认知

人都是活在各自心境里&#xff0c;有些话通过语言去交流&#xff0c;还是要回归自己心境内在的&#xff0c;而不是靠外在映射到股票和技术方法&#xff1b;比如说明天市场阶段是不修复不接力节点&#xff0c;这就是最高视角看整个市场&#xff0c;还有哪一句话能概括&#xff1…

数据结构【链栈】

基于 C 实现链表栈&#xff1a;原理、代码与应用 一、引言 栈就是一个容器&#xff0c;可以当场一个盒子&#xff0c;只能一个一个拿&#xff0c;一个一个放&#xff0c;而且是从上面放入。 有序顺序栈操作比较容易【会了链栈之后顺序栈自然明白】&#xff0c;所以我们这里只…

成绩案例demo

本案例较为简单&#xff0c;用到的知识有 v-model、v-if、v-else、指令修饰符.prevent .number .trim等、computed计算属性、toFixed方法、reduce数组方法。 涉及的功能需求有&#xff1a;渲染、添加、删除、修改、统计总分&#xff0c;求平均分等。 需求效果如下&#xff1a…

C++:抽象类习题

题目内容&#xff1a; 求正方体、球、圆柱的表面积&#xff0c;抽象出一个公共的基类Container为抽象类&#xff0c;在其中定义一个公共的数据成员radius(此数据可以作为正方形的边长、球的半径、圆柱体底面圆半径)&#xff0c;以及求表面积的纯虚函数area()。由此抽象类派生出…

Java面试题2025-并发编程基础(多线程、锁、阻塞队列)

并发编程 一、线程的基础概念 一、基础概念 1.1 进程与线程A 什么是进程&#xff1f; 进程是指运行中的程序。 比如我们使用钉钉&#xff0c;浏览器&#xff0c;需要启动这个程序&#xff0c;操作系统会给这个程序分配一定的资源&#xff08;占用内存资源&#xff09;。 …

AI智慧社区--百度地图

数据库&#xff1a; 前端实现 页面代码 <template><div class"app-container"><baidu-map class"bm-view" :center"center" :zoom"zoom" ready"initMap"><!-- 定位 --><bm-geolocation anchor…

WSL2中安装的ubuntu搭建tftp服务器uboot通过tftp下载

Windows中安装wsl2&#xff0c;wsl2里安装ubuntu。 1. Wsl启动后 1&#xff09;Windows下ip ipconfig 以太网适配器 vEthernet (WSL (Hyper-V firewall)): 连接特定的 DNS 后缀 . . . . . . . : IPv4 地址 . . . . . . . . . . . . : 172.19.32.1 子网掩码 . . . . . . . .…

一、TensorFlow的建模流程

1. 数据准备与预处理&#xff1a; 加载数据&#xff1a;使用内置数据集或自定义数据。 预处理&#xff1a;归一化、调整维度、数据增强。 划分数据集&#xff1a;训练集、验证集、测试集。 转换为Dataset对象&#xff1a;利用tf.data优化数据流水线。 import tensorflow a…

软件工程概论试题五

一、多选 1.好的软件的基本属性包括()。 A. 效率 B. 可依赖性和信息安全性 C. 可维护性 D.可接受性 正答&#xff1a;ABCD 2.软件工程的三要素是什么()? A. 结构化 B. 工具 C.面向对象 D.数据流! E.方法 F.过程 正答&#xff1a;BEF 3.下面中英文术语对照哪些是正确的、且是属…

问题的价值 ( Value of Question ) 公式

一、什么是问题的价值 我们的人生、工作的期间、瞬息万变的商业环境中&#xff0c;我们必然会面对很多问题&#xff0c;也会提出很多问题。 但这些问题是否具有回答的 价值&#xff0c;应该如何 衡量 呢&#xff1f; 简单如&#xff0c;女朋友问今晚应该吃什么、世界如何才能…

一文了解阿里的 Qwen2.5 模型

最近被DeepSeek刷屏了&#xff0c;但是在之外阿里在2025年1月28日推出了Qwen 2.5 Max模型。 Qwen2.5-Max 的特点&#xff1a;大规模的 MoE 模型&#xff0c;预训练于超 20 万亿 tokens&#xff0c;并经过 SFT 和 RLHF 后训练。 性能表现&#xff1a;在多个基准测试中与领先模型…

基于Django的Boss直聘IT岗位可视化分析系统的设计与实现

【Django】基于Django的Boss直聘IT岗位可视化分析系统的设计与实现&#xff08;完整系统源码开发笔记详细部署教程&#xff09;✅ 目录 一、项目简介二、项目界面展示三、项目视频展示 一、项目简介 该系统采用Python作为主要开发语言&#xff0c;利用Django这一高效、安全的W…

Hive:复杂数据类型之Map函数

Map函数 是Hive里面的一种复杂数据类型, 用于存储键值对集合。Map中的键和值可以是基础类型或复合类型&#xff0c;这使得Map在处理需要关联存储信息的数据时非常有用。 定义map时,需声明2个属性: key 和 value , map中是 key value 组成一个元素 key-value, key必须为原始类…

计算机毕业设计Python动漫推荐系统 漫画推荐系统 动漫视频推荐系统 机器学习 bilibili动漫爬虫 数据可视化 数据分析 大数据毕业设计

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…

2025年02月02日Github流行趋势

项目名称&#xff1a;oumi 项目地址url&#xff1a;https://github.com/oumi-ai/oumi 项目语言&#xff1a;Python 历史star数&#xff1a;1416 今日star数&#xff1a;205 项目维护者&#xff1a;xrdaukar, oelachqar, taenin, wizeng23, kaisopos 项目简介&#xff1a;构建最…

谭浩强C语言程序设计(3) 7章

1、递归实现N的阶乘 c复制 #include <cstdio> // 包含标准输入输出库// 计算n的阶乘 int total 0; // 定义全局变量total用于存储阶乘结果// 递归函数计算阶乘 int fac(int a){// 如果输入的数小于0&#xff0c;输出错误信息if (a < 0){printf("%d < 0,err…