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

Vue 模板语法 v-bind

红色框里面的都是vue的模板。有了模板就得有模板的特殊语法。上面只是简单的双括号加上表达式,这种叫做插值语法,除了这种语法还有其他语法吗?

插值语法实现的功能很单一,就是将指定的值放到指定的位置。还有一种叫做指令语法,它能够完成的就相对高端一些。

vue里面的指令很多,都是以v-开头。下面其实就是将执行的结果绑定给v-bind

<a v-bind:href="url">点击我去百度</a>   
//如果加上v-bind:,那么vue会将引号里面包着的东西url拿出来当js表达式去执行,url就相对于变量new Vue({    el: "#app",   data:{ name: "lucas",url: "https://www.baidu.com",}})

v-bind可以指定任何一个属性。bind可以给标签里面任何一个标签属性动态的绑定值。v-bind:可以简写为:冒号。

    <div id="app"><h1>hello world name:{{name}}</h1><a v-bind:href="url" v-bind:x="hello">点击我去百度</a></div><script type="text/javascript"> Vue.config.productionTip = false     new Vue({    el: "#app",   data:{ name: "lucas",url: "https://www.baidu.com",hello: "xxx",}})

通过上面可以看到插值语法往往用于指定标签体内容,也即是html元素中间部分。这部分需要渲染可以使用插值语法。

v-bind不管理标签里面的内容,它是用于管理标签的属性。

Vue模板语法有2大类:

1.插值语法;

  • 功能:用于解析标签体内容。
  • 写法:{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性。

2.指令语法:

  • 功能:用于解析标签(包括:标签属性、标签体内容、绑定事件...)。
  • 举例:v-bind:href="xxx" 或简写为:href="xxx",xxx同样要写js表达式,且可以直接读取到data中的所有属性。
  • 备注:Vue中有很多的指令,且形式都是:v-????,此处我们只是拿v-bind举个例子。

在data当中,不仅仅可以是基本的数据类型,还可以是对象。所以data里面的数据可以是多级的结构。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>首页</title><!--引入vue,这里引入vue那么这里就多了vue构造函数--><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head><body>  <div id="app"><h1>hello world name:{{name}} school里面的name:{{school.name}}</h1><a v-bind:href="school.url" v-bind:x="hello">点击我去百度</a></div><script type="text/javascript"> Vue.config.productionTip = false     new Vue({    el: "#app",   data:{ name: "lucas",school:{name: "jerry",url: "https://www.baidu.com",},}})</script></body>
</html>

 对于插值语法没有什么高深的玩法,就两对花括号{{}}里面写上表达式

相关文章:

Vue 模板语法 v-bind

红色框里面的都是vue的模板。有了模板就得有模板的特殊语法。上面只是简单的双括号加上表达式&#xff0c;这种叫做插值语法&#xff0c;除了这种语法还有其他语法吗&#xff1f; 插值语法实现的功能很单一&#xff0c;就是将指定的值放到指定的位置。还有一种叫做指令语法&am…...

定义宏,字符串、枚举、接口类绑定

在项目中&#xff0c;有一些接口处理类&#xff0c;比如 "value1"对应的类处理使用class Cvalue1 "value2"对应的类处理使用class Cvalue2 使用 X-Macros 技术能够很大程度上帮助我们&#xff0c;减少代码量并且使得代码简洁。 如果我们需要对每一个字…...

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

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

「Verilog学习笔记」用优先编码器①实现键盘编码电路

专栏前言 本专栏的内容主要是记录本人学习Verilog过程中的一些知识点&#xff0c;刷题网站用的是牛客网 分析 用此编码器实现键盘的编码电路。 注意&#xff1a;编码器的输出是低电平有效&#xff0c;而键盘编码电路输出的是正常的8421BCD码&#xff0c;是高电平有效。因此将编…...

APT攻击的特点及含义

APT&#xff08;高级持续性威胁Advanced Persistent Threat&#xff09;攻击是一种高级、持续性的攻击模式&#xff0c;通过先进的攻击手段对特定目标进行长期持续性的网络攻击&#xff0c;一般针对拥有敏感数据的大型企业及重要机构。 APT攻击的特点 一、目标性强 APT攻击并…...

使用html2canvas插件进行页面截屏

使用纯html实现过程 <!DOCTYPE html> <html><head><title>使用html2canvas生成网页截图</title><script src"https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script> </head><body><h1>…...

Java --- JVM的执行引擎

目录 一、执行引擎概述 1.1、执行引擎的工作过程 二、Java代码编译和执行的过程 三、解释器 3.1、解释器工作机制 3.2、解释器分类 3.3、解释器现状 四、JIT编译器 五、热点代码及探测方式 六、方法调用计数器 6.1、热点衰减 七、回边计数器 八、HotSpot VM设置程序…...

前端学习笔记--node.js

Node Node 可以理解成 ECMAScript 内置的模块组成的&#xff0c;引用第三方模块&#xff0c; npm系统 node package manager。 node是基于js的&#xff0c;前端来写服务端通过node是最方便的&#xff0c;node的性能问题 内部采用的多线程。 node中主线程还是单线程的 &#…...

DB2 常用命令及SQL语句

前言 DB2数据库是由IBM开发的关系型数据库管理系统&#xff08;RDBMS&#xff09;。它是一种功能强大、可扩展和可靠的数据库解决方案&#xff0c;用于存储和管理企业级应用程序的数据。 以下是一些关于DB2数据库的重要信息和特点&#xff1a; 数据模型&#xff1a;DB2数据库…...

spring-boot-starter-data-redis2.X连接redis7

由于redis7引入了acl机制&#xff0c;可以配置用户权限&#xff0c; 比如配置了一个普通用户 test&#xff0c;权限为 test_ 前缀的key可操作 springboot想要连接&#xff0c;并没有设置用户名的地方&#xff0c; 跟了源码&#xff0c;jedis客户端是支持的&#xff0c;但是s…...

PHP中$_SERVER全局变量

在PHP中&#xff0c;$_SERVER 是一个全局数组变量&#xff0c;它包含了有关服务器和当前脚本的信息。$_SERVER 数组中的每个元素都是服务器环境的一个参数&#xff0c;如请求的方法、请求的 URI、客户端 IP 地址等。 PATH 系统环境变量的值&#xff0c;包含了多个目录的路径…...

【ML】欠拟合和过拟合的一些判别和优化方法(吴恩达机器学习笔记)

吴恩达老师的机器学习教程笔记 减少误差的一些方法 获得更多的训练实例——解决高方差尝试减少特征的数量——解决高方差尝试获得更多的特征——解决高偏差尝试增加多项式特征——解决高偏差尝试减少正则化程度 λ——解决高偏差尝试增加正则化程度 λ——解决高方差 什么是…...

服务器数据恢复—服务器发生故障导致数据丢失如何恢复服务器数据?

服务器常见故障&#xff1a; 硬件故障&#xff1a;磁盘、板卡、电源故障等。 软件故障&#xff1a;操作系统崩溃、程序运行错误等。 入侵破坏&#xff1a;加密、删除服务数据等。 不可控力&#xff1a;浸水、火烧、倒塌等。 误操作&#xff1a;格式化、删除、覆盖等。 如何减少…...

SLAM中提到的相机位姿到底指什么?

不小心又绕进去了&#xff0c;所以掰一下。 以我个人最直观的理解&#xff0c;假设无旋转&#xff0c;相机在世界坐标系的(5,0,0)^T的位置上&#xff0c;所谓“位姿”&#xff0c;应该反映相机的位置&#xff0c;所以相机位姿应该如下&#xff1a; Eigen::Matrix4d T Eigen::M…...

《视觉SLAM十四讲》-- 后端 1(上)

文章目录 08 后端 18.1 概述8.1.1 状态估计的概率解释8.1.2 线性系统和卡尔曼滤波&#xff08;KF&#xff09;8.1.3 非线性系统和扩展卡尔曼滤波&#xff08;EKF&#xff09;8.1.4 小结 08 后端 1 前端视觉里程计可以给出一个短时间内的轨迹和地图&#xff0c;但由于不可避免的…...

南昌市西湖区棒球特色规划

西湖区棒球特色学校打造方案 一、项目背景 南昌市西湖区作为江西省的教育强区&#xff0c;一直致力于发展特色教育。近年来&#xff0c;棒球运动逐渐受到广泛关注&#xff0c;西湖区决定将棒球运动作为特色项目&#xff0c;打造一所具有国际水平的棒球特色学校。 二、目标与…...

nginx启动命令

普通启动 切换到nginx安装目录的sbin目录下&#xff0c;执行&#xff1a;./nginx 通过配置文件启动 ./nginx -c /usr/local/nginx/conf/nginx.conf /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf 其中-c是指定配置文件,而且配置文件路径必须指定绝对路…...

防爆五参数气象仪的科技力量

WX-FBQ2 随着科技的不断进步&#xff0c;气象监测设备也在不断升级和完善。 防爆五参数气象仪是一种可以同时监测温度、湿度、压力、风速和风向五个基本气象参数的仪器。它采用了气象监测技术&#xff0c;不仅可以实时监测气象数据&#xff0c;还可以对数据进行分析和处理。 …...

J. Chem. Theory Comput. | AI驱动的柔性蛋白-小分子复合物建模

今天为大家介绍的是来自陈语谦教授团队发表在Journal of Chemical Theory and Computation的论文&#xff0c;“Equivariant Flexible Modeling of the Protein−Ligand Binding Pose with Geometric Deep Learning”&#xff0c;博士生董铁君为第一作者。该文提出了一种新的AI…...

数据库sql语句设置外键

当我们需要在数据库表之间建立关联关系时&#xff0c;可以使用外键&#xff08;Foreign Key&#xff09;来实现。在 SQL 中&#xff0c;外键可以用来保持数据的完整性&#xff0c;并帮助我们更有效地管理数据。以下是设置外键的步骤&#xff1a; 1.在创建表时&#xff0c;需要…...

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

19c补丁后oracle属主变化,导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中,手势开发全攻略:

在 HarmonyOS 应用开发中&#xff0c;手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力&#xff0c;既支持点击、长按、拖拽等基础单一手势的精细控制&#xff0c;也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

屋顶变身“发电站” ,中天合创屋面分布式光伏发电项目顺利并网!

5月28日&#xff0c;中天合创屋面分布式光伏发电项目顺利并网发电&#xff0c;该项目位于内蒙古自治区鄂尔多斯市乌审旗&#xff0c;项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站&#xff0c;总装机容量为9.96MWp。 项目投运后&#xff0c;每年可节约标煤3670…...

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效&#xff0c;它能挖掘数据中的时序信息以及语义信息&#xff0c;但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN&#xff0c;但是…...