当前位置: 首页 > news >正文

vuejs 模板语法、条件渲染、v-for、事件处理、表单输入绑定

创建vue项目之后我们就可以开始写代码了,我们的代码一般都会写在src目录-components目录-HelloWord.vue文件内。

我们之前写的HTML文件的结构是HTML代码可以集成或者连接外部的css/js文件。
我们通过vue建立的项目,它的结构是在一个vue文件内集成了HTML、css、JavaScript的代码。包含三个部分:<template><script><style scoped>分别对应HTML代码、JavaScript代码、css样式

模板语法

插值

模板语法我们使用的是{{}}双花括号来进行插值的。

对比我们之前,如果要修改元素的值,就需要先获取对象。通过对象的属性去修改,而vue则是可以通过模板语法来进行修改。

<template>
<p>{{name}}</p>
<p>{{age}}</p></template><script>
export default {data(){return {name:"xxx",age:18}}
}
</script><style scoped></style>

这里首先我的p标签里面的两个{{}}表明了我需要两个数据,一个是name,一个是age

然后script部分我通过return语句返回了name和age两个变量给它,它接收到之后渲染到页面中

{{}}里面可以写变量和表达式。假如我传递了一个变量num,它的值是100

我{{}}里面可以填写num*10这个表达式,或者num ? 10:100问号表达式,又或者是逻辑表达式a>b这种。但是我不能写一个if语句或者for语句

渲染html代码(类似于innerhtml)

如果我有一个code:"<a href="https://www.baidu.com">"百度</a>需要渲染到HTML文件中

如果我直接使用刚才讲的{{}},那最后出现的结果就是HTML文件被原样写道里面,而不会被解析。

这个时候我们就需要使用v-html="code"我们把这个HTML代码正确渲染到页面中

下面我们来看代码演示
 

//这是使用{{}}
<template><p>{{code}}</p></template><script>
export default {data(){return {code:`<a href = "https://www.baidu.com">百度</a>`,    }}
}
</script><style scoped>
</style>//这是使用v-html
<template><p v-html="code"></p></template><script>
export default {data(){return {code:`<a href = "https://www.baidu.com">百度</a>`,}}
}
</script><style scoped>
</style>

他们的显示结果如图所示

这里我们可以发现使用v-html可以正常的渲染我们所需要的HTML标签,而{{}}是给什么就显示什么

渲染属性

我们标签的class、id、data-?都是属性的一种。我们可以通过v-bind:class/id来设置

我们通过例子来学习

<template>
<p v-bind:id="id" :class="classss" :data-one="dataone" ></p></template><script>
export default {data(){return {id:"name",classss:"name",dataone:"one",}}
}
</script><style scoped></style>

通过网页源代码我们可以看到这些属性是正常被渲染上去了的。

语法格式就是 v-bind:class/id/data- ="属性值"这种方式,而且v-bind: 可以只写一个冒号 : 来代替

条件渲染 

条件渲染就是根据不同的情况来渲染不同的界面

v-if(v-else)

大家发现没有,到现在我们所学的除了插值之外的所有语法都是以类似于标签的属性的语法来写的

v-if也是如此,它会根据“属性值”的布尔值来判断是否渲染该标签。

我们来看一个例子

<template>
<p v-if="flag">可以输出,imok</p></template><script>
let a =10
let b =11export default {data(){return {flag:a<b}}
}
</script><style scoped></style>

这里我们首先声明了两个全局变量,然后给它们赋值。判断它们是否是符合return返回的表达式

如果合理返回true,v-if可以渲染。反之返回false,v-if不能渲染

我们也可以在v-if后面写一个表达式,比如说我想写一个大于六十就渲染可以写v-if:"num > 60",然后我只需要把num给他就好了。

既然有if那就要有else了

v-else和js的else差不多,就是配对的if为false就执行else,为true就不执行。关于v-if和v-else配对的问题这里也简单说一下。

v-else会自动配对上文中的最近的、处于同一父元素的v-if

<p v-if="flag">可以输出,imok</p>
<p v-else>bukeyila</p><p v-else>buke222222222222a</p>

这段代码,虽然有两个v-else,但是它们都会被匹配到上文的v-if

<div>
<p v-if="flag">可以输出,imok</p>
<p v-else>bukeyila</p>
</div><p v-else>buke222222222222a</p>

这段带码就不会出现两个v-else匹配同一个,因为它直接报错了。主要原因就是前面的v-else与v-if处于同一父元素下,所以它们会配对,但是不在同一父元素下的哪个v-else就会因为找不到匹配的v-if而报错

v-else-if

这个就是else if,v-if判断不成功就会进入它,再进行判断。相当于if嵌套

通过代码我们可以很轻松的理解


<template>
<div>
<p v-if="flag>10">大于十</p>
<p v-else-if="flag>5">大于五</p><p v-else>error</p>
</div></template><script>
let a =10
export default {data(){return {flag:a}}
}
</script><style scoped></style>

这里返回的flag是a变量a,它的值是10

然后我们会在v-if判断,结果是flase,然后跳转到v-else-if,结果是true,就会渲染对应的标签。这个就是把判断语句写入到了标签内。

v-show

单独的控制一个元素的显示与否。他与v-if用法一样,但是区别在于v-if是条件为真才进行渲染,v-show是不管条件真不真都会渲染,他控制的是对应标签的css(如:display)

我们在查看源代码的时候是可以看到v-show的标签的代码的,但是v-if只有在条件为真才可以看到

v-for

v-for是循环渲染,它会重复渲染所在的标签

我们依旧是通过代码来看:

<template><ol><li v-for="i in 10">{{i}}</li></ol>
</template>

在这段代码中我并没有接收什么数据,我只是使用了一个i in 10给了v-for,然后打印这个li标签。

最后的结果就是我打印出了十个有序列表。然后i的数值是从1到10 这是我确认循环多少次,也可以把10换成一个变量

<template><ol><li v-for="i in num">{{i}}</li></ol>
</template>
<script>
export default {data(){return{num:10,}}}
</script>
<style></style>

大致就是这个样子,当然。num也可以是数组,我们可以通过传递数组来遍历。

<template><ol><li v-for="i in arr">{{i.name}}</li></ol>
</template>
<script>
export default {data(){return{arr:[{name:"xxx"},{name:"yyy"},{name:"yyx"},{name:"yxx"},]}}}
</script>
<style></style>

这里我们传递了一个数组arr,它里面每一个元素都是一个对象。我们通过这个来访问对象里面的信息。

i in arr循环数组内每一个元素,i.name就是循环到元素的name属性。这里我们要注意的是使用v-for会根据循环的次数创建相应个数的标签。而且如果arr数组新加了几个元素,它并不会把所有的都重新渲染一遍。而是添加渲染新加入的元素。

:key

这个的作用是用于确认每一条代码的唯一性,也是为了预防一些错误的发生。我们在写数据的时候最好是给它们都设置上唯一的一个标识id。

它的使用语法是v-for="i in arr" :key="i.id" 这就需要我们为数据们添加一个id

事件处理

添加事件(监听事件)

使用的是v-on(或者简写成@)

<template><button v-on:click="cont++">{{cont}}</button>
</template>
<script>
export default {data(){return{cont:0}}}
</script>
<style></style>

 在这段代码中,我们的按钮添加了一个v-on,它绑定的事件是单击。对应的处理是cont++,然后把cont实时渲染到按钮上 

还有就是事件监听触发函数,这个函数我们就不能在data()里面写了。函数有专门写它的地方
在data()下面再写一个methods:{} 打括号里面填写方法

export default {data(){//数据部分return{cont:0}},methods:{//函数部分a:function (){alert("nihao")},meth(){console.log("meth")}}}

如果想调用函数就可以这样写:@click="a"点击触发a函数

如果我们想通过点击按钮来改变data里面的值,就需要借助this了。我们通过一个简单的例子来学习:

<template><button v-on:click="meth">+1</button>//点击调用meth函数<p>{{cont}}</p>//渲染cont</template>
<script>
export default {data(){return{//传递值cont:0}},methods:{meth(){//让data里面的cont自增this.cont++}}}
</script>

methods里面的函数也是有event对象的。这个event和事件监听处理函数里面的event是一样的

参数传递。我们可以通过在写函数的时候meth(code)来声明它有一个形参code,然后在事件监听函数的处理函数里面传递实参@:click="meth("hello")",这个参数就会传递给meth函数里面的形参code

<template>
<div class="hello"><button @click="leijia">++</button>//点击触发leijia函数<hr><button @click="getnum(cont)">getnum</button>//点击触发getnum函数并且传递一个cont实参
</div>
</template>
<script>
export default {name: 'HelloWorld',data(){return {cont:0,}},methods:{leijia(){//累加函数this.cont++;},getnum(a){//获取数字用的函数alert(`the number of conts is ${a}`);//这里可以改成打印this.cont}}
}
</script>

这个例子主要是为了让大家理解函数传参与不传参的写法

表单输入绑定

表单一直是前端比较重要的一个东西,我们来看一下表单输入绑定.我们使用v-model=""把表单元素的数据绑定到指定的变量上。它其实是绑定数据和监听输入的结合(语法糖)

我们通过简单的例子来看

<template>
<div class="hello"><input type="text" v-model="str"><span>{{str}}</span>
</div>
</template>
<script>
export default {name: 'HelloWorld',data(){return {str:""}},methods:{}
}
</script>

我们给输入框添加了一个v-model属性,并绑定了str变量。当我们输入数据的时候v-model会把数据写给str。然后span标签又会把数据渲染出来。

但是我们如果每次输入都要获取数据并且渲染的话是很麻烦的,所以就引入了v-model的修饰符
v-model.lazy="str",这个的作用是我们输入的时候不会每次有新的内容都会渲染,而是按下回车键或者失去焦点的时候才会渲染

如果我们需要过滤掉用户输入的首尾空白字符就需要v-model.trim来进行修饰.它会去掉输入的数据开头和结尾的空白字符,但不会过滤掉数据中间的空白字符

修饰符是可以连用的:v-model.trim.lazy也是可以的

相关文章:

vuejs 模板语法、条件渲染、v-for、事件处理、表单输入绑定

创建vue项目之后我们就可以开始写代码了&#xff0c;我们的代码一般都会写在src目录-components目录-HelloWord.vue文件内。 我们之前写的HTML文件的结构是HTML代码可以集成或者连接外部的css/js文件。 我们通过vue建立的项目&#xff0c;它的结构是在一个vue文件内集成了HTML…...

论文阅读方法

文章目录 步骤一&#xff1a;对论文进行自我判断阅读题目和关键词。阅读摘要阅读总结要点 步骤二&#xff1a;阅读文章阅读图表和图表的注释阅读引言阅读实验部分阅读结果和作者对结果的讨论&#xff08;创新点&#xff09;要点 步骤三&#xff1a;精度论文回答问题1回答问题2回…...

问题解决:Kali Linux 中配置启用 Vim 复制粘贴功能

在 Kali Linux 系统中&#xff0c;使用 XShell 或其他类似终端时&#xff0c;Vim 编辑器的默认设置并不支持直接进行复制和粘贴操作&#xff0c;这对于日常的开发工作或渗透测试人员来说可能会造成不便。幸运的是&#xff0c;通过简单的配置调整&#xff0c;可以让 Vim 轻松支持…...

Linux hexdump命令

hexdump 是 Linux 中一个强大的二进制文件查看工具&#xff0c;可以用于查看文件的十六进制、ASCII 或其他格式的转储内容。以下是常见用法及示例&#xff1a; 1. 查看文件头部&#xff08;前 N 个字节&#xff09; 语法 hexdump -n <字节数> -C <文件名>示例&am…...

Stable Diffusion教程|快速入门SD绘画原理与安装

什么是Stable Diffusion&#xff0c;什么是炼丹师&#xff1f;根据市场研究机构预测&#xff0c;到2025年全球AI绘画市场规模将达到100亿美元&#xff0c;其中Stable Diffusion&#xff08;简称SD&#xff09;作为一种先进的图像生成技术之一&#xff0c;市场份额也在不断增长&…...

系统架构设计师—系统架构设计篇—微服务架构

文章目录 概述优势挑战 概述 微服务是一种架构风格&#xff0c;将单体应用划分成一组小的服务&#xff0c;服务之间相互协作&#xff0c;实现业务功能&#xff0c;每个服务运营在独立的进程中&#xff0c;服务间采用轻量级的通信机制协作&#xff08;通常是HTTP/JSON&#xff0…...

Array and string offset access syntax with curly braces is deprecated

警告信息 “Array and string offset access syntax with curly braces is deprecated” 是 PHP 中的一个弃用警告&#xff08;Deprecation Notice&#xff09;&#xff0c;表明在 PHP 中使用花括号 {} 来访问数组或字符串的偏移量已经被标记为过时。 背景 在 PHP 的早期版本…...

腾讯元宝:AI 时代的快速论文阅读助手

1. 背景与需求 在 AI 研究领域&#xff0c;每天都会涌现大量学术论文。如何高效阅读并提取关键信息成为研究者的一大难题。腾讯元宝是腾讯推出的一款大模型&#xff0c;结合了**大语言模型&#xff08;LLM&#xff09;和自然语言处理&#xff08;NLP&#xff09;**技术&#x…...

基于单片机的风速报警装置设计

标题:基于单片机的风速报警装置设计 内容:1.摘要 本设计聚焦于基于单片机的风速报警装置&#xff0c;旨在解决传统风速监测缺乏实时报警功能的问题。采用单片机作为核心控制单元&#xff0c;结合风速传感器采集风速数据。经实验测试&#xff0c;该装置能准确测量 0 - 60m/s 范…...

1998-2022年各地级市第一产业占GDP比重/地级市第一产业占比数据(市辖区)

1998-2022年各地级市第一产业占GDP比重/地级市第一产业占比数据&#xff08;市辖区&#xff09; 1、时间&#xff1a;1998-2022年 2、指标&#xff1a;地级市第一产业占GDP比重/地级市第一产业占比 3、来源&#xff1a;城市统计年鉴 4、范围&#xff1a;299个地级市 5、缺…...

IntersectionObserver接口介绍

IntersectionObserver API 是浏览器提供的一个用于异步观察目标元素与其祖先元素或视口&#xff08;Viewport&#xff09;交叉状态&#xff08;即是否进入或离开视口&#xff09;的接口。在 IntersectionObserver 出现之前&#xff0c;开发者通常需要通过监听 scroll 事件或使用…...

go并发学习笔记

包含了go学习笔记,含有channel的基础学习&#xff0c;编写数字的平方&#xff0c;如何成组的合并channel&#xff0c;如何优雅的关闭退出并发协程&#xff0c;通道阻塞情况分析&#xff0c;channel与哪些变成情况&#xff0c;可谓是收藏好文. 文章目录 并发1&#xff1a;chann…...

DeepSeek V3 源码:从入门到放弃!

从入门到放弃 花了几天时间&#xff0c;看懂了DeepSeek V3 源码的逻辑。源码的逻辑是不难的&#xff0c;但为什么模型结构需要这样设计&#xff0c;为什么参数需要这样设置呢&#xff1f;知其然&#xff0c;但不知其所以然。除了模型结构以外&#xff0c;模型的训练数据、训练…...

关于C++数据类型char的类型是整数的思考

学习数据类型时&#xff0c;整数类型中有一个特殊的类型char&#xff0c;可以使用字符来为其赋&#xff0c;也可以用整数来为其赋值&#xff0c;这是怎么一回事&#xff1f;其实任何类型&#xff0c;在计算机的内存中&#xff0c;在最小的存储单元比特中&#xff0c;内部只有0或…...

手写识别革命:Manus AI如何攻克多语言混合识别难题(二)

一、多语种特征分离&#xff1a;对抗训练与解耦表示 1. 梯度反转层&#xff08;GRL&#xff09;实现语言无关特征提取 class GradientReversalFn(Function):staticmethoddef forward(ctx, x, alpha):ctx.alpha alphareturn x.view_as(x)staticmethoddef backward(ctx, grad_…...

windows:curl: (60) schannel: SEC_E_UNTRUSTED_ROOT (0x80090325)

目录 1. git update-git-for-windows 报错2. 解决方案2.1. 更新 CA 证书库2.2. 使用 SSH 连接&#xff08;推荐&#xff09;2.3 禁用 SSL 验证&#xff08;不推荐&#xff09; 1. git update-git-for-windows 报错 LenovoLAPTOP-EQKBL89E MINGW64 /d/YHProjects/omni-channel-…...

typedef 和 using 有什么区别?

在 C 编程中&#xff0c;类型别名&#xff08;Type Aliases&#xff09;是为已有类型定义新名称的一种机制&#xff0c;能够显著提升代码的可读性和可维护性。C 提供了两种工具来实现这一功能&#xff1a;传统的 typedef 和 C11 引入的 using 关键字。 概念 类型别名本质上是为…...

【Java学习笔记】三、运算符,表达式、分支语句和循环语句

运算符与表达式 算数运算符与算数表达式 加减运算符 操作数&#xff1a;2结合方向&#xff1a;从左到右优先级&#xff1a;4级 乘&#xff08;*&#xff09;、除&#xff08;/)和取余&#xff08;%&#xff09;运算符 操作数&#xff1a;2结合方向&#xff1a;从左到右优先…...

广度优先遍历(BFS):逐层探索的智慧

引言&#xff1a;什么是广度优先遍历&#xff1f; 广度优先遍历&#xff08;BFS&#xff09;是一种用于遍历或搜索树&#xff08;Tree&#xff09;和图&#xff08;Graph&#xff09;结构的算法。其核心思想是逐层访问节点&#xff0c;先访问离起点最近的节点&#xff0c;再逐…...

网络HTTP

HTTP Network Request Library A Retrofit-based HTTP network request encapsulation library that provides simple and easy-to-use API interfaces with complete network request functionality. 基于Retrofit的HTTP网络请求封装库&#xff0c;提供简单易用的API接口和完…...

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

TDengine 快速体验(Docker 镜像方式)

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

云计算——弹性云计算器(ECS)

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?

Redis 的发布订阅&#xff08;Pub/Sub&#xff09;模式与专业的 MQ&#xff08;Message Queue&#xff09;如 Kafka、RabbitMQ 进行比较&#xff0c;核心的权衡点在于&#xff1a;简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...

抽象类和接口(全)

一、抽象类 1.概念&#xff1a;如果⼀个类中没有包含⾜够的信息来描绘⼀个具体的对象&#xff0c;这样的类就是抽象类。 像是没有实际⼯作的⽅法,我们可以把它设计成⼀个抽象⽅法&#xff0c;包含抽象⽅法的类我们称为抽象类。 2.语法 在Java中&#xff0c;⼀个类如果被 abs…...