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

Vue插值:双大括号标签、v-text、v-html、v-bind 指令

创建应用程序实例后,需要通过插值进行数据绑定。数据绑定是 Vue.js 最核心的一个特性。建立数据绑定后,数据和视图会相互关联,当数据发生变化时,视图会自动进行更新。这样就无须手动获取 DOM 的值,使代码更加简洁,提高了开发效率。

1、双大括号标签:文本插值

1.1 基本形式

文本插值是数据绑定最基本的形式,使用的是双大括号{{ }}标签。它会自动将绑定的事件实时显示出来。

【实例】使用的是双大括号{{ }}标签,将文本插入到HTML标签中。

<body><div id="app"><h3>{{title}}</h3><p>用户ID:{{userInfo.userId}}</p><p>用户名称:{{userInfo.userName}}</p><p>博客信息:{{userInfo.blogName}}</p><p>博客地址:{{userInfo.blogUrl}}</p></div>
</body><!-- 引入 Vue 框架 -->
<script src="../js/vue.global.js"></script><script type="text/javascript">// 使用 Vue.createApp 函数创建一个应用程序实例const vueApp = Vue.createApp({//数据data() {return {title: "使用双大括号{{ }}表达式,实现文本插值",userInfo: {userId: 1,userName: "pan_junbiao的博客",blogName: "您好,欢迎访问 pan_junbiao的博客",blogUrl: "https://blog.csdn.net/pan_junbiao"}}}//使用 mount() 方法,装载应用程序实例的根组件}).mount('#app'); 
</script>

执行结果:

1.2 使用表达式

在双大括号{{ }}标签中进行数据绑定时,标签中可以是一个 JavaScript 表达式。这个表达式可以是常量或者变量,也可以是常量、变量、运算符组合而成的式子。表达式的值是其运算后的结果。例如:在双大括号{{ }}标签中使用表达式,代码如下:

<!-- 表达式:计算 -->
<p>{{ num1 * num2}}</p><!-- 表达式:字符串大写函数 -->
<p>{{ str.toUpperCase() }}</p><!-- 表达式:自定义的方法 -->
<p>{{ calculator(num1,num2) }}</p>

【实例】在双大括号{{ }}标签中,使用 JavaScript 表达式。

<body><div id="app"><h3>{{title}}</h3><p>博客信息:{{userInfo.blogName}}</p><p>博客地址:{{userInfo.blogUrl}}</p><!-- 表达式:计算 --><p>{{ num1 * num2}}</p><!-- 表达式:字符串截取函数 --><p>{{ userInfo.blogName.substr(7) }}</p><!-- 表达式:自定义方法 --><p>{{ calculator(num1,num2) }}</p></div>
</body><!-- 引入 Vue 框架 -->
<script src="../js/vue.global.js"></script><script type="text/javascript">// 使用 Vue.createApp 函数创建一个应用程序实例const vueApp = Vue.createApp({//数据data() {return {title: "在双大括号{{ }}标签中,使用 JavaScript 表达式",userInfo: {blogName: "您好,欢迎访问 pan_junbiao的博客",blogUrl: "https://blog.csdn.net/pan_junbiao"},num1: 10,num2: 20}},//方法methods: {calculator: function (a, b) {return a + b;}}//使用 mount() 方法,装载应用程序实例的根组件}).mount('#app'); 
</script>

执行结果:

1.3 解决页面闪烁问题

使用双大括号{{ }}标签进行数据绑定时,有时会因为页面加载延时,而产生闪烁问题。

解决方法:可以使用 v-cloak 指令。

v-cloak 指令可以隐藏未编译的 Mustache 标签直到实例准备完毕,否则在渲染页面时,有可能用户会先看到 Mustache 标签,然后看到编译后的数据。

详细解决方法,请浏览本博客的文章:《Vue的 v-cloak 指令:解决页面闪烁问题》

2、v-text 指令:文本插值

v-text 指令用于 HTML 的文本插值,实现的效果与双大括号{{ }}标签类似。语法格式如下:

<p v-text="message"></p>

 同样的在 v-text 指令中也支持使用 JavaScript 表达式。代码如下:

<!-- 表达式:计算 -->
<p v-text="num1 * num2"></p><!-- 表达式:字符串大写函数 -->
<p v-text="str.toUpperCase()"></p><!-- 表达式:自定义方法 -->
<p v-text="calculator(num1,num2)"></p>

【实例】使用 v-text 指令和表达式,为 HTML 标签绑定数据。

<body><div id="app"><h3 v-text="title"></h3><p v-text="userInfo.blogName"></p><p v-text="userInfo.blogUrl"></p><!-- 表达式:计算 --><p v-text="num1 * num2"></p><!-- 表达式:字符串截取函数 --><p v-text="userInfo.blogName.substr(7)"></p><!-- 表达式:自定义方法 --><p v-text="calculator(num1,num2)"></p></div>
</body><!-- 引入 Vue 框架 -->
<script src="../js/vue.global.js"></script><script type="text/javascript">// 使用 Vue.createApp 函数创建一个应用程序实例const vueApp = Vue.createApp({//数据data() {return {title: "使用 v-text 指令和表达式",userInfo: {blogName: "您好,欢迎访问 pan_junbiao的博客",blogUrl: "https://blog.csdn.net/pan_junbiao"},num1: 10,num2: 20}},//方法methods: {calculator: function (a, b) {return a + b;}}//使用 mount() 方法,装载应用程序实例的根组件}).mount('#app'); 
</script>

执行结果:

3、v-html 指令:插入HTML文本

如果要输出真正的 HTML 内容,需要使用 v-html 指令。语法格式如下:

<p v-html="message"></p>

【实例】使用 v-html 指令,输出 HTML 内容。

<body><div id="app"><p v-html="title"></p><p v-html="blogName"></p><p v-html="blogUrl"></p></div>
</body><!-- 引入 Vue 框架 -->
<script src="../js/vue.global.js"></script><script type="text/javascript">// 使用 Vue.createApp 函数创建一个应用程序实例const vueApp = Vue.createApp({//数据data() {return {title: "<h3>使用 v-html 指令,输出 HTML 内容</h3>",blogName: "<h3 style='color:red'>您好,欢迎访问 pan_junbiao的博客</h3>",blogUrl: "<h3 style='color:blue'>https://blog.csdn.net/pan_junbiao</h3>"}}//使用 mount() 方法,装载应用程序实例的根组件}).mount('#app'); 
</script>

执行结果:

输入的 HTML 文档:

<p><h3>使用 v-html 指令,输出 HTML 内容</h3></p>
<p><h3 style="color:red">您好,欢迎访问 pan_junbiao的博客</h3></p>
<p><h3 style="color:blue">https://blog.csdn.net/pan_junbiao</h3></p>

4、v-bind 指令:绑定属性

4.1 固定属性

双大括号{{ }}标签不能应用在 HTML 属性中。如果要为 HTML 元素绑定属性,则不能直接使用文本插值的方式,而需要使用 v-bind 指令对属性进行绑定。

为 HTML 元素绑定属性的操作比较频繁。为了防止经常使用 v-bind 指令带来的烦琐,Vue.js 为该指令提供了一种简写形式“:”。

例如,为“pan_junbiao的博客”超链接设置URL和样式的完整格式如下:

<a v-bind:href="blogUrl" v-bind:class="{myLink:value}">pan_junbiao的博客</a>

简写形式如下:

<a :href="blogUrl" :class="{myLink:value}">pan_junbiao的博客</a>

【实例】使用 v-bind 指令,为超链接绑定URL和样式属性。

<style type="text/css">.myLink {text-decoration: none; /* 文本取消下划线 */cursor: pointer;       /* 鼠标光标为手型*/color: #0066ff;font-size: 26px;}
</style><body><div id="app">请点击博客链接:<a v-bind:href="blogUrl" v-bind:title="blogName" v-bind:class="{myLink:value}">{{blogName}}</a></div>
</body><!-- 引入 Vue 框架 -->
<script src="../js/vue.global.js"></script><script type="text/javascript">// 使用 Vue.createApp 函数创建一个应用程序实例const vueApp = Vue.createApp({//数据data() {return {blogName: "pan_junbiao的博客",blogUrl: "https://blog.csdn.net/pan_junbiao",value: true}}//使用 mount() 方法,装载应用程序实例的根组件}).mount('#app'); 
</script>

执行结果:

4.2 动态属性

从 Vue 2.6.0 版本开始,指令的参数可以是动态参数,即将中括号括起来的表达式作为指令的参数。如法如下:

指令:[表达式]

使用动态属性的示例代码如下:

<img v-bind:[attr]="imageSrc">

【实例】使用 v-bind 指令和动态属性,为超链接绑定URL和样式属性。

<style type="text/css">.myLink {text-decoration: none; /* 文本取消下划线 */cursor: pointer;       /* 鼠标光标为手型*/color: #0066ff;font-size: 26px;}
</style><body><div id="app">请点击博客链接:<a v-bind:[attr1]="blogUrl" v-bind:[attr2]="blogName" v-bind:[attr3]="{myLink:value}">{{blogName}}</a></div>
</body><!-- 引入 Vue 框架 -->
<script src="../js/vue.global.js"></script><script type="text/javascript">// 使用 Vue.createApp 函数创建一个应用程序实例const vueApp = Vue.createApp({//数据data() {return {blogName: "pan_junbiao的博客",blogUrl: "https://blog.csdn.net/pan_junbiao",value: true,attr1:'href',attr2:'title',attr3:'class'}}//使用 mount() 方法,装载应用程序实例的根组件}).mount('#app'); 
</script>

相关文章:

Vue插值:双大括号标签、v-text、v-html、v-bind 指令

创建应用程序实例后&#xff0c;需要通过插值进行数据绑定。数据绑定是 Vue.js 最核心的一个特性。建立数据绑定后&#xff0c;数据和视图会相互关联&#xff0c;当数据发生变化时&#xff0c;视图会自动进行更新。这样就无须手动获取 DOM 的值&#xff0c;使代码更加简洁&…...

实验五之用Processing绘画

1.案例代码如下&#xff1a; import generativedesign.*; import processing.pdf.*; import java.util.Calendar; Tablet tablet; boolean recordPDF false; float x 0, y 0; float stepSize 5.0; PFont font; String letters "Sie hren nicht die folgenden Gesnge…...

Apache CloudStack Official Document 翻译节选(七)

关于 Apache CloudStack 的 最佳实践 &#xff08;一&#xff09; Best Practices 部署Apache CloudStack是极具挑战性的&#xff0c;在整个部署过程中需要你做出形形色色的技术性选择。Apache CloudStack的配置条目是相当灵活的&#xff0c;这是因为在组合和配置具体条目时有…...

动态创建 Delphi 按钮的完整指南:基于配置文件的 `TGridPanel` 实现

在 Delphi 开发中&#xff0c;我们经常需要根据不同的配置动态生成 UI 元素。本文将带你通过一个完整的示例&#xff0c;演示如何根据配置文件动态创建按钮&#xff0c;并将它们排列在一个 TGridPanel 中。每个按钮的标题、链接、颜色和大小都将从配置文件中读取。 “C:\myApp\…...

【设计模式】工厂模式和抽象工厂模式

工厂模式 function User(role, pages) {this.role role;this.pages pages; }// new User(admin, [home, user, setting]); // new User(user, [home, user]); // new User(guest, [home]);function UserFactory(role) {switch (role) {case admin:return new User(role, [ho…...

【xilinx】Versal Adaptive SoC DDRMC - NoC QoS 选项卡未出现

在 2024.1 之前的 Vivado 版本中&#xff0c;用户在使用 NoC 验证块设计时可以访问 NoC 对象窗口和 QoS 选项卡。 Vivado 2024.1 中存在一个已知问题&#xff0c;即 NoC 对象窗口和 QoS 选项卡不出现。 要显示 NoC 对象窗口和 QoS 选项卡&#xff0c;请保存块设计&#xff0c;…...

融合创新:EasyCVR视频汇聚平台云计算技术与AI技术共筑雪亮工程智能防线

随着信息技术的飞速发展&#xff0c;视频云计算技术作为云计算领域的一个重要分支&#xff0c;正逐步在公共安全、社会治理等领域展现出其独特的优势。特别是在雪亮工程这一群众性治安防控工程中&#xff0c;视频云计算技术更是发挥了不可替代的作用。本文将从视频云计算技术的…...

keepalived的技术原理及其在负载均衡场景中的应用

keepalived的技术原理及其在负载均衡场景中的应用 深入探讨Keepalived及其在负载均衡场景中的应用1. **Keepalived概述**2. **Keepalived的技术原理**2.1 **VRRP协议**2.2 **健康检查机制**2.3 **脚本管理** 3. **Keepalived与LVS的结合应用**3.1 **LVS优缺点** 4. **Nginx与HA…...

树的重心 by江河湖海

引入 重心是什么? 想象你有一个由线悬挂的秋千,秋千的两端坐着两个人,如果这两个人坐在秋千的重心上,秋千就会保持平衡。在树的结构中,重心就是那个让所有节点到它那里的“距离”(可以理解为线的长度)总和最小的点。 重心为什么最多只有两个? 假设树的重心有两个,…...

MySQL存储过程深入指南

MySQL存储过程深入指南 存储过程是MySQL中一个强大的功能,能够显著提升数据库操作的效率和灵活性。本文将全面介绍存储过程的概念、语法、使用方法及最佳实践,帮助读者熟练掌握存储过程的使用。 1. 什么是存储过程? 存储过程(Stored Procedure)是预先编译并存储在数据库…...

牛客算法小题

目录 牛客.求和​编辑 牛客.abb 牛客.合并k个有序链表 牛客.滑雪&#xff08;暴力->递归->记忆化搜索&#xff09; 牛客.旋转字符串 牛客.求和 我没想到是dfs&#xff0c;另外我的dfs能力确实也不强&#xff0c;另外难度大的是他的那个输出 import java.util.Scanne…...

小米SU7销量超特斯拉,新车明年上半年发布

小米 SU7&#xff0c;一款国内新能源车品牌纯血新势力旗下首款轿车&#xff0c;上市短短 4 个月卖出超 4 万台&#xff0c;月均销量过万。 该说不说&#xff0c;这放在整个新能源汽车工业史上也足以称得上是一件小刀喇拍屁股&#xff0c;让人开了眼的事儿。 就在本月初&#x…...

基于Java语言的光伏监控系统+光伏发电预测+光伏项目+光伏运维+光伏储能项目

基于Java语言的光伏监控系统光伏发电预测光伏项目光伏运维光伏储能项目 介绍 基于Java语言的光伏监控系统光伏发电系统光伏软件系统光伏监控系统源码光伏发电系统源码 基于Java语言的光伏监控系统光伏发电预测光伏项目光伏运维光伏储能项目 安装教程...

unity json 处理

1. c#对象 -> json public class Item {public int id;public int num;public Item(int id, int num){this.id id;this.num num;} } public class PlayerInfo {public string name;public int atk;public int def;public float moveSpeed;public double roundSpeed;publi…...

如何使用DataGear零编码快速制作MQTT物联网实时数据看板

DataGear是一个开源免费的数据可视化分析平台&#xff0c;企业版在开源版基础上开发&#xff0c;新增了诸多企业级特性&#xff0c;包括&#xff1a;MySQL及更多部署数据库支持、MQTT/WebSocket/Redis/MongoDB数据集、OAuth2.0/CAS/JWT/LDAP统一登录支持、前后端敏感信息加密传…...

Mysql查询日志

Mysql查询日志 Mysql查询日志默认是关闭状态的。 mysql> show variables like %general_log%; --------------------------------------- | Variable_name | Value | --------------------------------------- | general_log | OFF …...

Airtest 的使用

Airtest 介绍 Airtest Project 是网易游戏推出的一款自动化测试框架&#xff0c;其项目由以下几个部分构成 Airtest : 一个跨平台的&#xff0c;基于图像识别的 UI 自动化测试框架&#xff0c;适用于游戏和 App &#xff0c; 支持 Windows, Android 和 iOS 平台&#xff0c…...

Android更改包名和签名

一、更改包名 1、包名——鼠标右键——Refactor——Rename 修改自己想更改的包名和选择更改范围后点击Refactor就可以了 2.手动修改app的build.gradle文件中的applicationId&#xff08;改成和我们之前修改的包名相同&#xff09; 3.修改AndroidManifest.xml文件中的packag…...

tortoisegit下载及其使用流程

下载 官方下载链接&#xff1a;Download – TortoiseGit – Windows Shell Interface to Git 选择适合自己的电脑位数的版本&#xff1a;一般64的兼容32的 按照就不介绍了怎么开心怎么来&#xff0c;本篇暂时为了支持一位粉丝的疑惑 安装的话没有特殊配置暂不介绍&#xff0c…...

Anrdoir 13 关于设置静态IP后,突然断电,在上电开机卡动画

bug描述:设置静态IP成功后,机器突然断电,然后在上电开机,发现机器一直卡在开机动画,无法成功进入桌面 第一时间抓取日志分析,Log如下: 08-13 11:26:42.455 2803 2803 I EthernetServiceImpl: Starting Ethernet service 08-13 11:26:42.457 2803 2924 D ConnectivityServ…...

告别Elsevier投稿焦虑:Elsevier Tracker的智能监控方案

告别Elsevier投稿焦虑&#xff1a;Elsevier Tracker的智能监控方案 【免费下载链接】Elsevier-Tracker 项目地址: https://gitcode.com/gh_mirrors/el/Elsevier-Tracker 作为科研工作者&#xff0c;你是否也曾经历过这样的困境&#xff1a;每天多次登录Elsevier投稿系统…...

智慧树自动化学习助手:技术实现与最佳实践指南

智慧树自动化学习助手&#xff1a;技术实现与最佳实践指南 【免费下载链接】zhihuishu 智慧树刷课插件&#xff0c;自动播放下一集、1.5倍速度、无声 项目地址: https://gitcode.com/gh_mirrors/zh/zhihuishu 智慧树在线学习平台作为国内主流的教育资源平台&#xff0c;…...

OFA-VE惊艳效果:赛博UI中‘逻辑矛盾’红色爆炸动效设计解析

OFA-VE惊艳效果&#xff1a;赛博UI中‘逻辑矛盾’红色爆炸动效设计解析 1. 引言&#xff1a;当AI推理遇见赛博美学 想象一下&#xff0c;你上传了一张图片&#xff0c;并输入一句话描述它。一个系统不仅能判断这句话对不对&#xff0c;还能用一种极具视觉冲击力的方式告诉你&…...

如何安全导出浏览器Cookie?本地处理方案全解析

如何安全导出浏览器Cookie&#xff1f;本地处理方案全解析 【免费下载链接】Get-cookies.txt-LOCALLY Get cookies.txt, NEVER send information outside. 项目地址: https://gitcode.com/gh_mirrors/ge/Get-cookies.txt-LOCALLY 在数据驱动的开发环境中&#xff0c;浏览…...

千问图像生成16Bit(Qwen-Turbo-BF16)GPU利用率提升50%:BF16数值稳定性实证

千问图像生成16Bit&#xff08;Qwen-Turbo-BF16&#xff09;GPU利用率提升50%&#xff1a;BF16数值稳定性实证 基于 Qwen-Image-2512 底座与 Wuli-Art Turbo LoRA 构建的高性能、极速图像生成 Web 系统。 在AI图像生成领域&#xff0c;精度选择一直是性能与质量之间的关键权衡。…...

缓存穿透的解决方式?—布隆过滤器

在技术领域&#xff0c;我们常常被那些闪耀的、可见的成果所吸引。今天&#xff0c;这个焦点无疑是大语言模型技术。它们的流畅对话、惊人的创造力&#xff0c;让我们得以一窥未来的轮廓。然而&#xff0c;作为在企业一线构建、部署和维护复杂系统的实践者&#xff0c;我们深知…...

文墨共鸣部署案例:中小企业低成本部署水墨风语义分析SaaS前端

文墨共鸣部署案例&#xff1a;中小企业低成本部署水墨风语义分析SaaS前端 1. 项目介绍与价值 文墨共鸣是一个将深度学习技术与传统水墨美学完美结合的语义分析系统。这个项目专门为中文文本设计&#xff0c;能够智能分析两段文字之间的语义相似度&#xff0c;判断它们是"…...

Qwen2.5-VL视觉定位效果展示:Ollama输出坐标+置信度+层级关系JSON

Qwen2.5-VL视觉定位效果展示&#xff1a;Ollama输出坐标置信度层级关系JSON 最近在玩一个挺有意思的AI模型——Qwen2.5-VL-7B-Instruct。这可不是普通的聊天机器人&#xff0c;它是一个能“看懂”图片&#xff0c;还能把看到的东西用结构化数据告诉你的视觉多模态模型。 简单…...

颠覆性视频转文字体验:零基础掌握bili2text全流程攻略

颠覆性视频转文字体验&#xff1a;零基础掌握bili2text全流程攻略 【免费下载链接】bili2text Bilibili视频转文字&#xff0c;一步到位&#xff0c;输入链接即可使用 项目地址: https://gitcode.com/gh_mirrors/bi/bili2text 还在为从B站视频中提取文字内容而烦恼&…...

低成本GPU算力玩转大模型编剧:Pixel Script Temple双卡并行部署实操手册

低成本GPU算力玩转大模型编剧&#xff1a;Pixel Script Temple双卡并行部署实操手册 1. 项目概述 Pixel Script Temple是一款专为剧本创作设计的AI工具&#xff0c;基于Qwen2.5-14B-Instruct大模型深度微调而成。它最大的特点是能够在消费级GPU硬件上实现高效运行&#xff0c…...