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

2024-08-21 07:20

本文主要是介绍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 指令的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1092499

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全栈,前后端开发,小程序开发,人工智能,js逆向,App逆向,网络系统安全,数据分析,Django,fastapi

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能

Vue3项目开发——新闻发布管理系统(六)

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后,系统就进入了首页。接下来,也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分,左侧为系统的菜单栏,右侧

EMLOG程序单页友链和标签增加美化

单页友联效果图: 标签页面效果图: 源码介绍 EMLOG单页友情链接和TAG标签,友链单页文件代码main{width: 58%;是设置宽度 自己把设置成与您的网站宽度一样,如果自适应就填写100%,TAG文件不用修改 安装方法:把Links.php和tag.php上传到网站根目录即可,访问 域名/Links.php、域名/tag.php 所有模板适用,代码就不粘贴出来,已经打

【VUE】跨域问题的概念,以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略,该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同,则需要服务器显式地允许这种跨域请求。一般在springbo

HTML提交表单给python

python 代码 from flask import Flask, request, render_template, redirect, url_forapp = Flask(__name__)@app.route('/')def form():# 渲染表单页面return render_template('./index.html')@app.route('/submit_form',