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>

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

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

相关文章

外部环境连接kafka

外部环境连接kafka

修改配置文件外部环境连接kafka 1、kafka的docker官方镜像地址2、kafka官方介绍的三种连接方式3、方式一&#xff1a;Default configs默认配置4、方式二&#xff1a;File input&#xff08;文件输入&#xff1a;外部配置文件替换docker容器内的配置文件&#xff09;4.1、首先查…
阅读更多...
自存实践本地访问 nginx放前端打包好的项目

自存实践本地访问 nginx放前端打包好的项目

nginx 部署前端项目_哔哩哔哩_bilibili 将打包好的dits文件放到 配置nginx.conf文件的location 启动命令 start nginx.exe 输入localhost即可访问打包好的项目 nginx的特点 1.静态资源 2.转发 设置代理转发请求 关闭nginx .\nginx.exe -s quit
阅读更多...
分享从零开始学习网络设备配置--任务6.2 实现网络设备的远程管理

分享从零开始学习网络设备配置--任务6.2 实现网络设备的远程管理

任务描述 某公司的网络管理员小赵负责公司办公网的管理工作&#xff0c;熟悉了公司内部设备运行情况&#xff0c;每天都需要保障公司内部网络设备的正常运行&#xff0c;同时进行办公网的日常管理和维护工作。 在安装办公网中&#xff0c;路由器和交换机放置在中心机房&…
阅读更多...
【生日视频制作】教师节中秋节国庆节红色直升飞机AE模板修改文字软件生成器教程特效素材【AE模板】

【生日视频制作】教师节中秋节国庆节红色直升飞机AE模板修改文字软件生成器教程特效素材【AE模板】

红色直升飞机生日视频制作教程AE模板改文字广软件告生成器素材 怎么如何做的【生日视频制作】教师节中秋节国庆节红色直升飞机AE模板修改文字软件生成器教程特效素材【AE模板】 生日视频制作步骤&#xff1a; 安装AE软件下载AE模板把AE模板导入AE软件修改图片或文字渲染出视频…
阅读更多...
【Python机器学习】NLP概述——词序和语法

【Python机器学习】NLP概述——词序和语法

词的顺序很重要&#xff0c;那些在词序列&#xff08;如句子&#xff09;中控制词序的规则被称为语言的语法&#xff08;也被称为文法&#xff09;。这是之前的词袋或词向量例子中所丢弃的信息。在大多数简短的短语甚至许多完整的句子中&#xff0c;上述词向量近似方法都可以奏…
阅读更多...
电脑硬盘坏了怎么恢复数据？

电脑硬盘坏了怎么恢复数据？

在数字化时代&#xff0c;电脑硬盘作为存储核心&#xff0c;承载着我们的工作文档、学习资料、家庭照片以及无数珍贵的回忆。然而&#xff0c;硬盘作为机械设备&#xff0c;也有其寿命和脆弱性&#xff0c;一旦出现故障&#xff0c;数据恢复便成为了一个紧迫而棘手的问题。本文…
阅读更多...
Centos7 message日志因dockerd、kubelet、warpdrive、containerd等应用迅速增长

Centos7 message日志因dockerd、kubelet、warpdrive、containerd等应用迅速增长

问题&#xff1a;公司服务器在部署一套业务后&#xff0c;message日志记录大量的dockerd、kubelet、warpdrive、containerd应用日志&#xff0c;每天增加2G大小的日志 解决方案&#xff1a; 前期吐槽下&#xff1a;发现某个帖子&#xff0c;需要会员或者花钱才能看&#xff0c…
阅读更多...
AfuseKt v1.3.5 — 打造自己的视频库，可刮削

AfuseKt v1.3.5 — 打造自己的视频库，可刮削

AfuseKt是一款功能全面的安卓视频播放器&#xff0c;支持从阿里云盘、Alist、WebDAV、Emby到Jellyfin等多个平台直接播放视频。注册简单&#xff0c;一次邮箱登记即可畅享所有功能&#xff0c;包括自动刮削和海报墙展示。无论你是电影迷还是系列剧的忠实粉丝&#xff0c;AfuseK…
阅读更多...
Elasticsearch-关键词随机查询(8.x)

Elasticsearch-关键词随机查询(8.x)

目录 一、查询语句 二、Java代码实现 基础介绍&#xff1a; ES自定义评分机制:function_score查询详解-阿里云开发者社区ES自定义评分机制:function_score查询详解https://developer.aliyun.com/article/1054571 开发版本详见&#xff1a;Elasticsearch-经纬度查询(8.x-半径…
阅读更多...
npm安装时一直在idealTree:npm: sill idealTree buildDeps卡住不动解决方法

npm安装时一直在idealTree:npm: sill idealTree buildDeps卡住不动解决方法

npm安装xmysql时一直idealTree:npm: sill idealTree buildDeps卡住不动 问题解决&#xff0c;如下图所示 解决方法&#xff1a; 1、查看.npmrc位置&#xff0c;并去目录中删掉.npmrc文件 --在cmd&#xff08;DOS页面&#xff09;界面执行下述指令&#xff0c;可查看 .npmrc 文…
阅读更多...
数学建模起步感受（赛前15天）

数学建模起步感受（赛前15天）

0基础直接上手数模&#xff0c;因为大一&#xff01;年轻就是无所畏惧&#xff01;开个玩笑&#xff0c;因为数模比赛比一年少一年… 抱着不打也是浪费的态度&#xff0c;我开始着手准备 首先python啥也不会&#xff0c;知道有元组这玩意… 仅仅在刷软考题的时候遇到python选择…
阅读更多...
单域名SSL证书申请三步法

单域名SSL证书申请三步法

申请单域名SSL证书&#xff0c;确保您的网站安全可信&#xff0c;只需简单三步&#xff1a; 选择证书类型与提供商&#xff1a;首先&#xff0c;确定您需要的单域名SSL证书类型&#xff0c;如DV&#xff08;域名验证&#xff09;证书。接着&#xff0c;选择一个信誉良好的证书提…
阅读更多...
[003].第4节：RabbitMQ环境搭建

[003].第4节：RabbitMQ环境搭建

我的后端学习大纲 RabbitMQ学习大纲 1.rpm包方式搭建&#xff1a; 1.1.搭建RabbitMQ单体架构&#xff1a; 1.MQ下载地址2.这里是提前下载好后上传安装包到服务器得opt目录下&#xff1a; 3.安装MQ需要先有Erlang语言环境&#xff0c;安装文件的Linux命令(分别按照以下顺序安装…
阅读更多...
喝酒上头的原因是什么？

喝酒上头的原因是什么？

酒精进入人体后&#xff0c;会被依次分解代谢成乙醛、乙酸&#xff0c;进而分解成二氧化碳和水&#xff0c;然后排出体外&#xff0c;这一代谢过程主要是依靠肝脏来进行的。如果代谢过程存在问题&#xff0c;那很有可能就会出现“上头”等不适症状。具体来说&#xff0c;主要与…
阅读更多...
C++ 设计模式——简单工厂模式

C++ 设计模式——简单工厂模式

简单工厂模式 简单工厂模式主要组成部分代码实现简单工厂模式模式的 UML 图简单工厂模式 UML 图解析优点和缺点适用场景 简单工厂模式 简单工厂模式是一种创建型设计模式&#xff0c;通过一个工厂类来负责对象的实例。这种模式将对象创建的细节封装在工厂类中&#xff0c;客户…
阅读更多...
CAN通讯接口 8路电压电流模拟量采集模块DAM-C3054P

CAN通讯接口 8路电压电流模拟量采集模块DAM-C3054P

简介&#xff1a; DAM-C3054P为8路差分模拟量采集模块&#xff0c;16位AD&#xff0c;CAN通讯接口&#xff0c;支持CAN2.0A标准帧格式&#xff0c;支持CAN-OPEN协议。配备良好的人机交互界面&#xff0c;使用方便&#xff0c;性能稳定。 产品图片及尺寸&#xff1a; 指标参数…
阅读更多...
2024网络安全学习路线，最全保姆级教程，学完直接拿捏！

2024网络安全学习路线，最全保姆级教程，学完直接拿捏！

关键词&#xff1a; 网络安全入门、渗透测试学习、零基础学安全、网络安全学习路线 首先咱们聊聊&#xff0c;学习网络安全方向通常会有哪些问题 前排提示&#xff1a;文末有CSDN独家网络安全资料包&#xff01; 1、打基础时间太长 学基础花费很长时间&#xff0c;光语言都有…
阅读更多...
机器学习|什么是梯度下降（小白向）|探寻最优解之路

机器学习|什么是梯度下降（小白向）|探寻最优解之路

文章目录 前言一、什么是梯度下降&#xff1f;二、梯度下降法一般步骤1.确定一个小目标——预测函数2.找到差距——代价函数3.明确搜索方向——梯度计算4.一步要走多远&#xff1f;——学习率 三、梯度下降的分类批量梯度下降&#xff08;Batch Gradient Descent&#xff09;随…
阅读更多...
Java语言程序设计基础篇_编程练习题***16.31（游戏：四子连）

Java语言程序设计基础篇_编程练习题***16.31（游戏：四子连）

目录 题目&#xff1a;***16.31&#xff08;游戏&#xff1a;四子连&#xff09; 习题思路 代码示例 结果展示 题目&#xff1a;***16.31&#xff08;游戏&#xff1a;四子连&#xff09; 编程练习题8.20让两个玩家在控制台上可以玩四子连的游戏。为这个程序重写一个GUI版本…
阅读更多...
Catf1ag CTF Web（八）

Catf1ag CTF Web（八）

前言 Catf1agCTF 是一个面向所有CTF&#xff08;Capture The Flag&#xff09;爱好者的综合训练平台&#xff0c;尤其适合新手学习和提升技能 。该平台由catf1ag团队打造&#xff0c;拥有超过200个原创题目&#xff0c;题目设计注重知识点的掌握&#xff0c;旨在帮助新手掌握C…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023