Vue 简单的语法

1.插值表达式

1.插值表达式的作用是什么?

利用表达式进行插值,将数据渲染到页面中;

2.语法结构?

{{表达式}}

3.插值表达式的注意点是什么?

(1)使用的数据要存在,在data中;

(2)支持的是表达式,而不是语句;

(3)不能在标签属性中使用;<p title={{ 变量 }}></p> ×

2.Vue 指令

Vue 会根据不同的指令,针对标签实现不同的功能。指令:带有 v-前缀的特殊标签属性;

(1)v-html:

        作用:动态的解析标签,(像插值表达式的话会以文本形式进行展示)

         v-html = "表达式 " → 动态设置元素 innerHTML
(2)v-show & v-if:
        作用:控制元素的隐藏
        -v-show:控制元素显示隐藏
         语法:v-show = "表达式" 表达式值 true 显示, false 隐藏
         原理:切换 display:none 控制显示隐藏
         场景: 频繁切换显示隐藏的场景
      
       -v-if:控制元素显示隐藏(条件渲染)
        语法: v-if = "表达式" 表达式值 true 显示, false 隐藏
        原理: 基于条件判断,是否 创建 或 移除 元素节点
        场景: 要么显示,要么隐藏,不频繁切换的场景
(3)v-else & v-else-if:
        作用:辅助v-if 进行判断渲染
        语法: v-else v-else-if = "表达式"
        注意: 需要紧挨着 v-if 一起使用
(4)v-on:
        作用:注册事件 = 添加监听+提供处理逻辑
        语法:<1> v-on:事件名 = “内联语句”  ; <2>  v-on:事件名 = “methods中的函数名”
        简写: @事件名=“methods中的函数名”
        注意:methods函数中的 this 指向 Vue 实例;同时,我们也可以通过v-on 来调用传参;
(5)v-bind:
        作用:动态地设置 html 的标签属性和 -> src  url title ...
        语法:v-bind:属性名 = “表达式
        注意:简写形式 :属性名 = “表达式”
(6)v-for:
        作用:基于数据循环,多次渲染整个元素 ->数组、对象、数字
        语法:v-for = "(item,index) in 数组";item 是每一项,index是索引;
        省略 index 则 v-for = "item in 数组"
        注意:v-for 的默认行为会尝试 原地修改元素 (就地复用),因而我们最好加上v-for 中的key,并且给元素添加的唯一标识,便于Vue进行列表项的正确排序复用。
        注意点:

        1. key 的值只能是 字符串 或 数字类型

        2. key 的值必须具有 唯一性
        3. 推荐使用 id 作为 key(唯一),不推荐使用 index 作为 key(会变化,不对应);
(7)v-model:

        作用:给表单元素使用,双向数据绑定 -> 可以快读获取或设置表单元素内容

        ① 数据变化 → 视图自动更新
        ② 视图变化 → 数据自动更新
        语法: v-model = '变量'

3.指令的修饰符

通过 “ . ” 指明一些指令的 后缀 ,不同 后缀 封装了不同的处理操作 -> 简化代码

(1)按键修饰符

        @keyup.enter -> 键盘回车监听

(2)v-model 修饰符

        v-model.trim -> 去除首尾空格

        v-model.number -> 转数字

(3)事件修饰符

        @事件名.stop -> 阻止冒泡

        @事件名.prevent -> 阻止默认行为

4.v-bind 对于样式操作的增强*

(1)v-bind  - 操作 class

        语法: : class = "对象/数组"

        1.对象 -> 键就是类名,值是布尔值。如果值是 true ,有这个类,否则没有这个类;

<div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div>

        适用的场景:一个类名,来回切换;

        2.数组 -> 数组中所有类,都会添加到盒子上,本质就是一个 class 列表

<div class="box" :class="[ 类名1, 类名2, 类名3 ]"></div>

        适用场景:批量添加或删除类;

示例:京东秒杀导航栏的切换

(2)v-bind - 操作 style (个人认为这个还是比较重要的)

        语法: :style = "样式对象"

<div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }"></div>

        适用场景:某个具体属性的动态设置

        注意的一些点:

        <1>一些格式:首先,对于CSS属性值,我们需要对其加引号;其次,对于带有横杠的属性名,在JS对象中是不支持的,因而此时可以采取两种方法:一种是驼峰;另一种是我们可以对这种属性名加引号;

<div :style="{height:"400px";width:"600px";backgroundColor:'white';'background-color':'white';}"></div>

        <2>如果对单个的属性进行动态的改变,则

<div :style="{height:"400px";width:len;}"></div>/* 然后在 data 中定义 len */

5.v-model 应用于其他表单元素

这个暂时和之前的是一样的


参考:

026-v-model应用于其他表单元素_哔哩哔哩_bilibili

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

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

相关文章

错误:ERROR:torch.distributed.elastic.multiprocessing.api:failed

在多卡运行时&#xff0c;会出现错误&#xff08;ERROR:torch.distributed.elastic.multiprocessing.api:failed&#xff09;&#xff0c;但是单卡运行并不会报错&#xff0c;通常在反向梯度传播时多卡梯度不同步。但我是在多卡处理数据进行tokenizer阶段报错&#xff0c;这竟然…

仿真算法收敛与初值的关系

问题&#xff1a; 当电路中存在大电容时&#xff0c;由于初值设置不合理可能导致的仿真算法不收敛的问题。 解决方法&#xff1a;设置初始节点值。 疑问&#xff1a;Node set和Initial Condition的区别。 [求助] node set 和initial condition有很么区别呢&#xff1f; 注&…

Kafka 的应用场景

Kafka 是一个开源的分布式流式平台&#xff0c;它可以处理大量的实时数据&#xff0c;并提供高吞吐量&#xff0c;低延迟&#xff0c;高可靠性和高可扩展性。 Kafka 最初是为分布式系统中海量日志处理而设计的。它可以通过持久化功能将消息保存到磁盘&#xff0c;并让消费者按…

Xshell+Xftp通过代理的方式访问局域网内网服务器

最近在部署项目时遇到只有1台服务器拥有公网ip&#xff0c;其它服务器只有局域网ip&#xff0c;当然其它服务器可以正常访问网络&#xff0c;例如如下模型。之前访问其它几台服务器&#xff0c;都是先通过登录公网IP服务器&#xff0c;然后在Xshell里面执行ssh远程连接&#xf…

uniapp: 实现pdf预览功能

目录 第一章 实现效果 第二章 了解并解决需求 2.1 了解需求 2.2 解决需求 2.2.1 方法一 2.2.2 方法二 第三章 资源下载 第一章 实现效果 第二章 了解并解决需求 2.1 了解需求 前端需要利用后端传的pdf临时路径实现H5端以及app端的pdf预览首先我们别像pc端一样&#…

单相过压继电器DVR-G-100-1 0~500V AC/DC220V 导轨安装

系列型号 DVR-G-100-1X3数字式过压继电器&#xff1b; DVR-G-100-3三相过压继电器&#xff1b; DVR(H)-G-100-1单相过压继电器&#xff1b; DVR-Q-100-3三相欠压继电器&#xff1b; DVR(H)-Q-100-3三相欠压继电器 一、用途 主要应用于电机、变压器等主设备以及输配电系统的继…

实现高值医疗耗材智能化管理的RFID医疗柜解决方案

一、行业背景 医疗物资管理面临着一系列问题&#xff0c;如高值耗材种类激增导致准入标准弱化、信息追踪困难、管理责任不明确等&#xff0c;医院内部设备、财务和临床科室相互独立&#xff0c;兼容性不佳&#xff0c;高值耗材储备不足&#xff0c;缺乏合理的预警机制&#xf…

libusb获取Windows设备实例路径DevicePath

libusb 当前版本&#xff08;1.0.26&#xff09;libusb.h 头文件提供的接口似乎没有办法获取 Windows 平台相关的设备实例路径&#xff0c;其形如&#xff1a; \\?\usb#vid_04ca&pid_7070#5&20d34a76&0&6#{a5dcbf10-6530-11d2-901f-00c04fb951ed} 只是提供了…

浙江大学数据结构陈越 第一讲 数据结构和算法

数据结构 数据结构是计算机科学中用来组织和存储数据的方式。它可以理解为一种组织数据的方式&#xff0c;能够有效地管理和操作数据&#xff0c;以及提供对数据进行存储、检索、更新和删除等操作的方法。常见的数据结构包括数组、链表、栈、队列、树和图等&#xff0c;它们各自…

盘点30个Python树莓派源码Python爱好者不容错过

盘点30个Python树莓派源码Python爱好者不容错过 学习知识费力气&#xff0c;收集整理更不易。 知识付费甚欢喜&#xff0c;为咱码农谋福利。 链接&#xff1a;https://pan.baidu.com/s/1LA4cLunntKW3qO5aok3xAQ?pwd8888 提取码&#xff1a;8888 项目名称 PiCar-raspber…

图数据库实战-HugeGraph简介

一、HugeGraph简介 HugeGraph是一款易用、高效、通用的开源图数据库系统&#xff08;Graph Database&#xff0c;GitHub项目地址&#xff09;&#xff0c; 实现了Apache TinkerPop3框架及完全兼容Gremlin查询语言&#xff0c; 具备完善的工具链组件&#xff0c;助力用户轻松…

吴恩达《机器学习》8-3->8-4:模型表示I、模型表示II

8.3、模型表示I 一、大脑神经网络的基本原理 为了构建神经网络模型&#xff0c;首先需要理解大脑中的神经网络是如何运作的。每个神经元都可以被看作是一个处理单元或神经核&#xff0c;它包含多个输入&#xff08;树突&#xff09;和一个输出&#xff08;轴突&#xff09;。…

【银行测试】支付功能、支付平台、支持渠道如何测试?

有朋友提问&#xff1a;作为一个支付平台&#xff0c;接入了快钱、易宝或直连银行等多家的渠道&#xff0c;内在的产品流程是自己的。业内有什么比较好的测试办法&#xff0c;来测试各渠道及其支持的银行通道呢&#xff1f; 作为产品&#xff0c;我自己办了十几张银行卡方便测…

使用PHP编写采集药品官方数据的程序

目录 一、引言 二、程序设计和实现 1、确定采集目标 2、使用PHP的cURL库进行数据采集 3、解析JSON数据 4、数据处理和存储 5、数据验证和清理 6、数据输出和可视化 7、数据分析和挖掘 三、注意事项 1、合法性原则 2、准确性原则 3、完整性原则 4、隐私保护原则 …

助力燃气安全运行:智慧燃气管网背景延展

关键词&#xff1a;城市燃气管网、智慧燃气管网、智慧管网、智慧燃气管网解决方案、智慧燃气 01背景 当前&#xff0c;随着我国城市化进程不断加快&#xff0c;城市燃气管网也不断延伸&#xff0c;运行规模庞大&#xff0c;地下管线复杂&#xff0c;不少城市建设“重地上轻地…

使用百度语音识别技术实现文字转语音的Java应用

探讨如何使用百度语音识别技术将文字转换为语音的Java应用。百度语音识别技术是一种强大的语音识别服务&#xff0c;可以将输入的文字转换为自然流畅的语音输出。我们将使用Java编程语言来实现这个应用&#xff0c;并提供相应的源代码。 首先&#xff0c;我们需要准备一些前提…

SpringCloud Alibaba(上):注册中心-nacos、负载均衡-ribbon、远程调用-feign

Nacos 概念&#xff1a;Nacos是阿里巴巴推出的一款新开源项目&#xff0c;它是一个更易于构建云原生应用的动态服务发现、配置管理和服务管理平台。Nacos致力于帮助用户发现、配置和管理微服务&#xff0c;它提供了一组简单易用的特性集&#xff0c;包括动态服务发现、服务配置…

Telnet 测试 UDP 端口?

Telnet 并不支持 UDP 端口的测试&#xff0c;可以使用 nc 命令来进行测试。nc 命令两种都支持&#xff1a; TCP # nc -z -v -u [hostname/IP address] [port number] # nc -z -v 192.168.10.12 22 Connection to 192.118.20.95 22 port [tcp/ssh] succeeded! UDP # nc -z -v…

百度搜索智能化算力调控分配方法

作者 | 泰来 导读 随着近年深度学习技术的发展&#xff0c;搜索算法复杂度不断上升&#xff0c;算力供给需求出现了爆发式的增长。伴随着AI技术逐步走到深水区&#xff0c;算法红利在逐步消失&#xff0c;边际效应日益显著&#xff0c;算力效能的提升尤为重要&#xff0c;同时随…

【Mycat2实战】二、Mycat安装部署

1. Mycat下载 Mycat官网下载地址&#xff0c;点击直接前往&#xff1a;http://www.mycat.org.cn/ Mycat 有提供编译好的安装包&#xff0c;支持 windows、Linux、Mac、 Solaris 等系统上安装与运行。 本文及后续系列的文章都是使用Linux的系统进行操作。 这里我们选择使用文…