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

Vue基础之模板语法介绍

news 文章来源：https://blog.csdn.net/m0_73647713/article/details/132993209 2024/11/7 18:46:04

前言

上篇我分享了关于Vue的入门，简单的入了个门。本篇文章将要分享的内容为Vue的模板语法。

一、插值

        1.1、文本

        1.2、html

        1.3、属性

        1.4、class、style绑定

        1.5、表达式

在Vue的模板语法中，插值是一种常用的方式来动态地将数据渲染到视图中。Vue使用双大括号{{}}作为插值的语法标记。

最简单的用法是在模板中直接插入数据值，例如：

<p>{{ message }}</p>

上面的代码将把Vue实例中的message属性的值插入到<p>元素中。

插值还支持JavaScript表达式，你可以在插值中使用表达式来执行计算或调用函数，例如：

<p>{{ message.toUpperCase() }}</p>

上面的代码将把message属性的值转换为大写后插入到<p>元素中。

另外，插值还可以用在HTML属性中，例如：

<a v-bind:href="url">{{ linkText }}</a>

上面的代码使用v-bind指令将url属性的值绑定到<a>元素的href属性上，并将linkText属性的值插入到<a>元素中显示的文本内容中。

需要注意的是，在插值中不能使用括号或赋值语句，因为插值只接受单个表达式。

总结起来，Vue的模板语法中的插值提供了一种简洁而灵活的方式来将数据动态地渲染到视图中可以直接插入数据值，也可以使用JavaScript表达式进行计算和函数调用。此外，插值还可以用在HTML属性中。

案例：

完整代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>插值</title><!-- 引入vue.js的依赖 --><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script></head><body><!-- 定义边界 --><div id="app"><h1>{{msg}}</h1><h6>{{msg}}</h6><h3>演示适用html样式</h3><div v-html="htmlstr"></div><h3>演示vue 中的属性值</h3><input type="text" v-bind:value="val" /><h3>演示Class与style绑值</h3><span :class="f200" v-bind:style="colorblue">二者合为一体</span><h3>演示表达式</h3>{{str.substr((0,5))}}<br />月薪：{{number-2000}}<br />{{ok ? '好' : '不好'}}<br /><span :id="id+'id'">商品id</span></div></body><script>// 绑定边界new Vue({el: '#app',data() {return {msg: '七里香的名字很美',htmlstr: '<span style="color:red;">雨水</span>',val: '输入的值',str: '人生苦短，我用Java',number: 19999,ok: false,id: 'goods_',colorblue: 'color: blue;',f200: 'f200'}}})</script>
</html>

二、指令


核心指令

  (v-if|v-else|v-else-if)/v-show/v-for/v-bind/v-on/v-model

 v-if|v-else|v-else-if：根据其后表达式的bool值进行判断是否渲染该元素

他们只能是兄弟元素

v-else-if上一个兄弟元素必须是v-if

v-else上一个兄弟元素必须是v-if或者是v-else-if

  v-show：与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style="display:none"

  v-for：类似JS的遍历，

 遍历数组: v-for="item in items", items是数组，item为数组中的数组元素

 遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名，index下标

 v-model：用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值   

v-for/v-model一起绑定[多选]复选框和单选框
 

  1. v-bind插值：v-bind指令用于在HTML属性中插入动态的数据。可以简写为:。
<img :src="imageSrc">

上述代码中，:src将会把imageSrc变量的值作为src属性的值进行插值。

  1. v-on插值：v-on指令用于在HTML事件处理程序中插入动态的方法。可以简写为@。
<button @click="handleClick">Click Me</button>

上述代码中，@click将会将handleClick方法插入到click事件处理程序中。

  1. v-html插值：v-html指令用于将数据作为原始HTML插入到元素中。
<div v-html="htmlString"></div>

上述代码中，htmlString变量的值将会被作为原始HTML插入到<div>元素之中。

  1. v-text插值：v-text指令用于替代双大括号插值，将指定的数据直接作为文本内容插入到元素中。
<p v-text="message"></p>

上述代码中，message变量的值将会作为<p>元素的文本内容。

注意重点：面试考题！！！

区别v-if与v-show？

  1. v-if：
    v-if指令根据条件表达式的值来控制元素的存在与否。当条件为true时，元素会被添加到DOM中；当条件为false时，元素会被从DOM中移除。它是惰性的，在条件变为true时才会进行渲染，可以避免不必要的DOM操作。
<div v-if="isShown">This is shown</div>

当isShown为true时，<div>元素会被渲染到视图中；当isShown为false时，<div>元素不会被渲染。

  1. v-show：
    v-show指令根据条件表达式的值来控制元素的显示或隐藏，但不会对DOM结构进行改变。当条件为true时，元素会以CSS的方式进行展示；当条件为false时，元素会以CSS的方式隐藏。即使在条件为false时，元素仍然存在于DOM中，只是在视觉上被隐藏了。
<div v-show="isShown">This is shown</div>

当isShown为true时，<div>元素会以可见的方式展示；当isShown为false时，<div>元素通过display: none隐藏，但仍然在DOM中存在。

区别总结：

  • v-if：根据条件决定元素是否存在于DOM中，惰性渲染。
  • v-show：根据条件决定元素的显示与隐藏，通过CSS控制。

一般而言，如果需要在条件变化频繁的情况下切换元素的显示与隐藏，或者初始渲染时元素可能不会被显示的情况下，推荐使用v-show。而如果需要在条件改变时有更高的渲染开销，或避免初始化时不必要的渲染，使用v-if更为合适。

案例：

代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>指令</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script></head><body><!-- 定义边界 --><div id="app"><h3>演示v-if 使用</h3>请输入成绩：1-100 <input type="text" v-model="degree" style="color: red;" /><div v-if="degree<=60">等级E</div><div v-else-if="degree<=70">等级D</div><div v-else-if="degree<=80">等级C</div><div v-else-if="degree<=90">等级B</div><div v-else-if="degree<=100">等级A</div><div v-else="">输入成绩不合法</div><h3>演示v-show 与 v-if区别</h3><div v-show="ok">show</div><div v-if="ok">if</div><h3>演示v-for</h3><select><option v-for="h in hobby" :value="h.id">{{h.name}}</option></select><div v-for="h in hobby"><input :value="h.id" type=checkbox />{{h.name}}</div></div></body><script>new Vue({el: '#app',data() {return {degree: 78,ok: false,hobby: [{id: "1",name: "乒乓球"},{id: "2",name: "滑板"},{id: "3",name: "跑步"}],};}})</script>
</html>

三、过滤器


过滤器

全局过滤器

Vue.filter('filterName', function (value) {
 // value 表示要过滤的内容

});

局部过滤器

new Vue({
 filters:{'filterName':function(value){}}

});

vue允许你自定义过滤器，被用作一些常见的文本格式化，格式如下：

<!-- 在两个大括号中 -->

{{ name | capitalize }}

<!-- 在 v-bind 指令中 -->

<div v-bind:id="rawId | formatId"></div>

注1：过滤器函数接受表达式的值作为第一个参数

注2：过滤器可以串联     

{{ message | filterA | filterB }}

注3：过滤器是JavaScript函数，因此可以接受参数：

{{ message | filterA('arg1', arg2) }}

注4：js定义一个类

function Stu(){};

Stu.prototype.add(a,b){};//添加一个新的实例方法

Stu.update(a,b){};//添加一个新的类方法 
 

四、计算属性、过滤器

计算属性

   计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新

   computed:{}

相关文章：

Vue基础之模板语法介绍

前言 上篇我分享了关于Vue的入门&#xff0c;简单的入了个门。本篇文章将要分享的内容为Vue的模板语法。 一、插值 1.1、文本 1.2、html 1.3、属性 1.4、class、style绑定 1.5、表达式 在Vue的模板语法中&#xff0c;插值是一种常用的方式来动态地将数据渲染到视图中。Vue使用双…...

编程日记 2023/9/19 7:22:56

【SLAM】 前端-视觉里程计之特征点

前端-视觉里程计之特征点 参考资料&#xff1a; 以不变应万变&#xff1a;前端-视觉里程计之特征点 视觉SLAM——特征点法 task05 本次了解了特征点是由关键子和描述子组成&#xff0c;并且对比了SIFT、SURF等七种获取特征点的方法&#xff0c;同时对比了SIFT、SURF和ORB方法…...

编程日记 2023/9/19 7:21:55

Android笔记(二十九)：利用python自动生成多语言

背景 项目需要支持十几种多语言&#xff0c;而且每个版本的新功能ui都有很多地方需要多语言&#xff0c;如果手动添加非常耗时&#xff0c;于是设计了一个python脚本&#xff0c;通过excel表格转化多语言到项目values/strings文件内 步骤 android工程项目结构 脚本位于langu…...

编程日记 2023/9/19 7:20:54

【C++STL基础入门】list的运算符重载和关于list的算法

文章目录 前言一、list运算符1.1 逻辑运算符1.2 赋值运算符 二、list相关算法2.1 查找函数总结 前言 C标准模板库&#xff08;STL&#xff09;是一组强大而灵活的工具&#xff0c;用于处理数据结构和算法。其中&#xff0c;std::list是STL中的一个重要容器&#xff0c;它实现了…...

编程日记 2023/9/19 7:18:52

查找内轮廓（孔洞）

一 说明 findContours( InputOutputArray image, OutputArrayOfArrays contours,OutputArray hierarchy, int mode,int method, Point offset=Point());参数列表中有个数据结构参数：hierarchy（译层次结构），hierarchy是一个向量，其元素个数与查找到的轮廓总数相同，每一个…...

编程日记 2023/9/19 7:16:48

Git（6）——GitHub

目录 一、简介 二、概要 三、注册 ​四、创建仓库 五、推送本地代码 六、拉取远端代码 一、简介 在Git&#xff08;5&#xff09;中&#xff0c;我们已经对Git分支的概念和用法有了一定了解&#xff0c;对于在本地进行代码版本管理&#xff0c;其实当前所学的东西基本已经…...

编程日记 2023/9/19 7:11:41

【RocketMQ专题】快速实战及集群架构原理详解

目录 课程内容一、MQ简介基本介绍*作用&#xff08;解决什么问题&#xff09; 二、RocketMQ产品特点2.1 RocketMQ介绍2.2 RocketMQ特点2.3 RocketMQ的运行架构 三、RocketMQ快速实战3.1 快速搭建RocketMQ服务3.2 快速实现消息收发3.3 搭建Maven客户端项目3.4 搭建RocketMQ可视化…...

编程日记 2023/9/19 7:07:35

[设计模式] 浅谈SOLID设计原则

目录 单一职责原则开闭原则里氏替换原则接口隔离原则依赖倒转原则 SOLID是一个缩写词&#xff0c;代表以下五种设计原则 单一职责原则 Single Responsibility Principle, SRP开闭原则 Open-Closed Principle, OCP里氏替换原则 Liskov Substitution Principle, LSP接口隔离原则 …...

编程日记 2023/9/19 7:06:34

基于Java+SpringBoot+Vue的旧物置换网站设计和实现

基于JavaSpringBootVue的旧物置换网站设计和实现 源码传送入口前言主要技术系统设计功能截图数据库设计代码论文目录订阅经典源码专栏Java项目精品实战案例《500套》 源码获取 源码传送入口 前言 摘 要 随着时代在一步一步在进步&#xff0c;旧物也成人们的烦恼&#xff0c;…...

编程日记 2023/9/19 7:05:32

Java基本语法2

目录 Java基本语法 第一个Java程序 基本语法 Java标识符 Java修饰符 Java变量 Java数组 Java枚举 Java关键字 Java注释 Java 空行 继承 接口 Java基本语法 一个Java程序可以认为是一系列对象的集合&#xff0c;而这些对象通过调用彼此的方法来协同工作。下面简要介…...

编程日记 2023/9/19 7:03:27

【数据结构】树的存储结构；树的遍历；哈夫曼树；并查集

欢~迎~光~临~^_^ 目录 1、树的存储结构 1.1双亲表示法 1.2孩子表示法 1.3孩子兄弟表示法 2、树与二叉树的转换 3、树和森林的遍历 3.1树的遍历 3.1.1先根遍历 3.1.2后根遍历 3.2森林的遍历 3.2.1先序遍历森林 3.2.2中序遍历森林 4、树与二叉树的应用 4.1哈夫曼树…...

编程日记 2023/9/19 6:58:20

CSS选择器练习小游戏

请结合CSS选择器练习小游戏进行阅读&#xff08;网页的动态效果是没有办法通过静态图片展示的&#xff09; 网址&#xff1a;请点击 有些题有多种答案&#xff0c;本文就不一一列出了 第一题 答案&#xff1a;plate第二题 答案&#xff1a;bento第三题 答案&#xff1a;#fa…...

编程日记 2023/9/19 6:57:19

Python运算符、函数与模块和程序控制结构

给我家憨憨写的python教程 ——雁丘 Python运算符、函数与模块和程序控制结构 关于本专栏一 运算符1.1 位运算符1.1.1 按位取反1.1.2 按位与1.1.3 按位或1.1.4 按位异或1.1.5 左移位 1.2 关系运算符1.3 运算顺序1.4 运算方向 二 函数与模块2.1 内建函数2.2 库函数2.2.1 标准库…...

编程日记 2023/9/19 6:55:17

微服务保护-Sentinel

初识Sentinel 雪崩问题及解决方案 雪崩问题 微服务中&#xff0c;服务间调用关系错综复杂&#xff0c;一个微服务往往依赖于多个其它微服务。 如图&#xff0c;如果服务提供者I发生了故障&#xff0c;当前的应用的部分业务因为依赖于服务I&#xff0c;因此也会被阻塞。此时&a…...

编程日记 2023/9/19 6:53:15

Doris 导出表结构或数据

MYSQLDUMP 导出表结构或数据 Doris 在0.15 之后的版本已经支持通过mysqldump 工具导出数据或者表结构 使用示例​ 导出​ 导出 test 数据库中的 table1 表&#xff1a;mysqldump -h127.0.0.1 -P9030 -uroot --no-tablespaces --databases test --tables table1导出 test 数…...

编程日记 2023/9/19 6:51:11

SELECT * from t_user where user_id = xxx,可以从那几个点去优化这句sql

优化SQL查询可以从以下几个方面入手&#xff1a; 1. 索引优化&#xff1a;通过为查询涉及的列添加合适的索引&#xff0c;可以提高查询的效率。在该SQL语句中&#xff0c; user_id 列被用作查询条件&#xff0c;可以为 user_id 列创建一个索引。 2. 避免使用 SELECT *&#xf…...

编程日记 2023/9/19 6:50:10

解决报错 java.lang.IllegalArgumentException: Cannot format given Object as a Date

报错原因&#xff1a;我们在SimpleDateFormat.format转化时间格式的时候&#xff0c;传入的值无法转换成date而报的错 我的代码大概就是下面这种 LocalDate now LocalDate.now();String format1 new SimpleDateFormat("yyyy-MM-dd").format(now); 发现SimpleDateF…...

编程日记 2023/9/19 6:48:06

【Git】03-GitHub

文章目录 1. GitHub核心功能2. GitHub搜索项目3. GitHub搭建个人博客4. 团队项目创建5. git工作流选择5.1 需要考虑的因素5.2 主干开发5.2 Git Flow5.3 GitHub Flow5.4 GitLab Flow(带生产分支)5.4 GitLab Flow(带环境分支)5.4 GitLab Flow(带发布分支) 6. 分支集成策略7. 启用…...

编程日记 2023/9/19 6:42:58

Java手写最短路径算法和案例拓展

Java手写最短路径算法和案例拓展 1. 算法手写的必要性 在实际开发中&#xff0c;经常需要处理图的最短路径问题。虽然Java提供了一些图算法库&#xff0c;但手写最短路径算法的必要性体现在以下几个方面&#xff1a; 理解算法原理&#xff1a;手写算法可以帮助我们深入理解最…...

编程日记 2023/9/19 6:39:54

深度学习实战51-基于Stable Diffusion模型的图像生成原理详解与项目实战

大家好，我是微学AI，今天给大家介绍一下深度学习实战51-基于Stable Diffusion模型的图像生成原理详解与项目实战。大家知道现在各个平台发的漂亮小姐姐，漂亮的图片是怎么生成的吗？这些生成的底层原理就是用到了Stable Diffusion模型。Stable Diffusion是一种基于深度学习的图…...

编程日记 2023/9/19 6:37:52

基于matlab实现的多普勒脉冲雷达回波仿真

完整程序&#xff1a; clear all;clc;close all; fc3e9; %载波频率 PRF2000; Br5e6; %带宽 fs10*Br; %采样频率 Tp5e-6; %脉宽 KrBr/Tp; %频率变化率 c3e8; %光速 lamda…...

编程日记 2023/9/19 6:35:49

Linux服务器中安装Anaconda+Tensorflow+Keras

Anaconda安装 从https://repo.anaconda.com/archive/查看你需要下载的Anaconda版本&#xff0c;例如2020.11的x86_64&#xff08;uname -a 查看linux框架&#xff09;版下载Anaconda到linux服务器&#xff0c; wget https://repo.anaconda.com/archive/Anaconda3-2020.11-Li…...

编程日记 2023/9/19 6:34:47

ubuntu+.net6+docker 应用部署教程

先期工作 1、本地首先安装 Docker Desktop 2、本地装linux in windows 3、生成镜像 后期工作 1、云服务器部署 生成镜像方法 1、生成Dockerfile配置文件 开发工具visual studio 2022 如果项目已经存在&#xff0c;可以选中项目&#xff0c;右键点击->选择添加Docker…...

编程日记 2023/9/19 6:32:45

Spring常见面试题总结

什么是Spring Spring是一个轻量级Java开发框架&#xff0c;目的是为了解决企业级应用开发的业务逻辑层和其他各层的耦合问题&#xff0c;以提高开发效率。它是一个分层的JavaSE/JavaEE full-stack&#xff08;一站式&#xff09;轻量级开源框架&#xff0c;为开发Java应用程序…...

编程日记 2023/9/19 6:29:40

Git全套命令使用

日升时奋斗&#xff0c;日落时自省 目录 1、Git安装 1.1、创建git本地仓库 1.2、配置Git 1.3、认识Git内部区分 2、Git应用操作 2.1、添加文件 2.2、查看日志 2.3、查看修改信息 2.4、查看添加信息 3、版本回退 4、撤销修改 4.1、工作区撤销 4.2、已经add&#xf…...

编程日记 2023/9/19 6:28:39

【陕西理工大学-数学软件实训】数学实验报告（8）（数值微积分与方程数值求解）

目录 一、实验目的 二、实验要求 三、实验内容与结果 四、实验心得 一、实验目的 1. 掌握求数值导数和数值积分的方法。 2. 掌握代数方程数值求解的方法。 3. 掌握常微分方程数值求解的方法。 二、实验要求 1. 根据实验内容&#xff0c;编写相应的MATLAB程序&#xff0c…...

编程日记 2023/9/19 6:27:38

Vue3为什么推荐使用ref而不是reactive

为什么推荐使用ref而不是reactive reactive本身具有很大局限性导致使用过程需要额外注意,如果忽视这些问题将对开发造成不小的麻烦;ref更像是vue2时代option api的data的替代,可以存放任何数据类型,而reactive声明的数据类型只能是对象; 先抛出结论,再详细说原因:非必要不用rea…...

编程日记 2023/9/19 6:26:37

JavaScript函数this指向

一、this的指向规则 1.this到底指向什么呢&#xff1f; 我们先来看一个让人困惑的问题&#xff1a; 定义一个函数&#xff0c;我们采用三种不同的方式对它进行调用&#xff0c;它产生了三种不同的结果 // 定义函数 function foo(name) {console.log("foo函数:", …...

编程日记 2023/9/19 6:25:36

Java的序列化

写在前面 本文看下序列化和反序列化相关的内容。 源码 。 1&#xff1a;为什么&#xff0c;什么是序列化和反序列化 Java对象是在jvm的堆中的&#xff0c;而堆其实就是一块内存&#xff0c;如果jvm重启数据将会丢失&#xff0c;当我们希望jvm重启也不要丢失某些对象&#xff…...

编程日记 2023/9/19 6:23:34

计算机二级python简单应用题刷题笔记（一）

计算机二级python简单应用题刷题笔记&#xff08;一&#xff09; 1、词频统计&#xff1a;键盘输入一组我国高校所对应的学校类型&#xff0c;以空格分隔&#xff0c;共一行。2、找最大值、最小值、平均分&#xff1a;键盘输入小明学习的课程名称及考分等信息&#xff0c;信息间…...

编程日记 2023/9/19 6:21:31

高端网站建设公司成都/优化公司治理结构

1.在用一套类的命名规则命名所有向导页之后&#xff0c;需求发生变化&#xff0c;导致新增类的命名规则和已有类不一致&#xff0c;冲突严重。思路:命名时考虑将来的变化&#xff0c;比如说假设需求变了&#xff0c;新的类名是否能适应现有规则&#xff0c;以动态的眼光看问题&…...

编程日记 2024/11/7 17:48:16

网站建设及域名/如何写软文推广产品

根据SqlServer2000 Analysis Services提供的帮助材料展开&#xff0c;略作说明并且根据各个函数的侧重点编写相应的MDX&#xff1b;这些成果主要源于我的老大浩哥&#xff0c;再次向他表示感谢。数组函数 函数 描述 SetToArray 将一个或多个集合转换为数组&#xff0c;以用于…...

编程日记 2024/11/7 9:37:54

哪个网站做阿里首页模板/云计算培训

1、给出了一个序列&#xff0c;你需要处理如下两种询问。 "C a b c"表示给[a, b]区间中的值全部增加c (-10000 ≤ c ≤ 10000)。 "Q a b" 询问[a, b]区间中所有值的和。 2、线段树单点更新太费时&#xff0c;所以使用区间更新 3、 #include <cstdio>…...

编程日记 2024/11/7 9:28:34

网站建设用哪种语言好/广告公司的业务范围

有些手机用久了&#xff0c;手机的音量就越来越小&#xff0c;相信很多人都碰到过这种情况&#xff0c;这个时候该怎么办呢&#xff1f;有没有办法来提高手机的音量呢&#xff1f;今天我就来介绍3种方法来提升手机的音量。方法一&#xff1a;开启手机的“单声道音频”。很多手机…...

编程日记 2024/11/7 9:07:26

网站建设目标论文/电脑培训学校在哪里

刚开始接触网络的时候&#xff0c;都必须得学习 OSI 模型&#xff0c;很多人不以为然&#xff01; 但是该模型&#xff0c;对于项目中的技术实施与故障定位与排查&#xff0c;具有极其重要的意义&#xff01; 少年&#xff0c;慢慢体会~~ 附件&#xff1a;http://down.51cto.co…...

编程日记 2024/11/7 4:53:47

家居企业网站建设如何/百度区域代理

刚看完urlretrieve函数&#xff0c;想要实战一下它的效果&#xff0c;于是找了国家地理杂志中国官网爬一下&#xff0c;网站http://www.nationalgeographic.com.cn/ 开发环境是Python2.7&&Pycharm 图片的src是这样的&#xff1a; 我们用正则&&BeautifulSoup匹配…...

编程日记 2024/11/7 3:31:32