（自用）02-插值指令的使用

已于 2022-03-13 17:46:07 修改
阅读量436 收藏
点赞数
文章标签： vue.js javascript
于 2022-03-13 15:35:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52134218/article/details/123460387
版权

01-插值语句的基本使用方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
	</head>
	<body>
		<div id="app">
			<h2>
				1 Mustache语法（也就是双大括号）
				格式1：{{变量名}} 		变量名语法
				格式2：{{变量名+变量名2}}  表达式语法
			</h2>
			<h2>{{msg}}-----{{d}}</h2>
			<h2>a*b={{a*b}}</h2>
		</div>
		<script type="text/javascript">
		const app=new Vue({
			el:"#app",
			data:{
				msg:"世界和平",
				a:123,
				b:456,
				d:"你好",
				变量名:'我是一个变量',
				变量名2:'我是中文变量2'
			}
		})
		</script>
	</body>
</html>

02-v-once指令的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
	</head>
	<body>
		<div id="app">
			<h1>v-once 指令 功能 设置不渲染修改后的数据</h1>
			<h2>格式一：可以渲染的数据</h2>
			<h2>{{msg}}</h2>
			<h2>格式2：设置只渲染一次的数据</h2>
			<h2 v-once>{{a*b}}</h2>
		</div>
		<script type="text/javascript">
		const app=new Vue({
			el:"#app",
			data:{
				a:123,
				b:456,
				msg:"你好"
			}
		})</script>
	</body>
</html>

03-v-html指令的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
		<div id="app">
			<h1>一、普通显示html语言的内容</h1>
			<h1>{{url}}</h1>
			<h2>二、v-html</h2>
			<h2 v-html="url"></h2>
			<h2 v-html="alink"></h2>
			
		</div>
		<script type="text/javascript">
		const app=new Vue({
			el:"#app",
			data:{
			msg:"我是标题一",
			alink:'<a href="https://www.bilibili.com/">B站</a>',
			url:'<a href="https://music.163.com/">网易云</a>'
			}
		})
		</script>
	</head>
	<body>
	</body>
</html>

04-v-text指令的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
	</head>
	<body>
		<div id="app">
		<h2>1 普通获取方式:{{msg}}</h2>
		<h2>2 v-text的获取方式</h2>
		<h2 v-text="b"></h2>
		<h3 v-text="msg"></h3>
		<h2>3 v-text的覆盖方式</h2>
		<h3 v-text="msg">我被覆盖掉，这个指令不常用</h3>
		
		
		</div>
		<script type="text/javascript">
		const app = new Vue({
			el:"#app",
			data:{
				msg:'jsklajd',
				b:'hhhhhhhhh'
			}
		})</script>
	</body>
</html>

05-v-pre指令的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
	</head>
	<body>
		<div id="app">
			<h2>普通获取数据的方式一：</h2>
			<h2>{{msg}}</h2>
			<h2>获取数据本身的方式二：数据按原样输出</h2>
			<h2 v-pre>{{msg}}</h2>
		</div>
		
		<script type="text/javascript">
		const app = new Vue({
			el:"#app",
			data:{
				msg:'jsklajd',
				b:'hhhhhhhhh'
			}
		})
		</script>
	</body>
</html>

06-v-cloak指令的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
		<style type="text/css">
		[v-cloak]{display: none;}
		</style>
	</head>
	<body>
		<div id="app" v-cloak >
			<h2>普通绑定渲染数据的方法：{{msg}}</h2>
			<h2>带斗篷的渲染方式：{{msg}}</h2>
			<h2>1 在vue解析前，app元素有一个c-cloak属性,设置对象的内容不显示
				2 在vue解析后，app元素取消v-cloak属性
			</h2>
		</div>
			
		<div id="ccc" style="display: none;">
			<h2>指令的使用</h2>
		</div>
		
		<script type="text/javascript">
		setTimeout(function(){
		const app = new Vue({
			el:"#app",
			data:{
				msg:"世界和平",
				a:123456
			}
		})
		},3000)
		</script>
	</body>
</html>

岄屿星辰
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js学习笔记——1.基本插值操作指令
土拨鼠的忧伤的博客
11-19 231
目录基本语法及指令（一）1.mustache语法2.v-once3.v-html4.v-text5.v-pre6.v-cloak 基本语法及指令（一） 1.mustache语法 {{message}} 即双大括号，插值表达式。作用：将data中文本数据插入到HTML中 举例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</tit
自用-kohya-ss GUI 部署及使用
12-18
自用-kohya-ss GUI 部署及使用
Vue插值 指令
qq_44537625的博客
05-24 328
Vue插值 指令 #Vue简介 vue插值语法 1.{{}} 插值表达式{{}} 主要用于数据绑定 {{}}中的可以是文本属性和表达式 如：文本：Message:{{msg}} 属性：{{this.abc}} false:false, 表达式：{{100+200}} 其中也可以为函数， {{title}} 2.指令： v-if:v-if 可以根据表达式的值在DOM中生成或移除一个元素。 ...
vue-插值操作及指令
葡萄要吃山竹的博客
10-22 387
插值操作mustache语法变量表达式vue mustache语法 变量 <h2>{{message}}</h2> <h2>{{message}}，李银河</h2> 表达式 <h2>{{firstName + lastName}}</h2> <h2>{{firstName + ' ' + lastName}}</h2> <h2>{{firstName}} {{lastName}}</h2&g
【 Vue全家桶 · Vue（三）】模板语法 —— 基础插值指令
JZevin的博客
09-03 420
文章目录一. 文本插值1.1 Mustache语法 (双大括号 {{ }} )1.2 v-text1.3 v-once二. HTML片段三. 属性（Attribute）3.1 v-bind指令3.2 class绑定3.3 style绑定四. 简单JavaScript 表达式 一. 文本插值 1.1 Mustache语法 (双大括号 {{ }} ) 数据绑定最常见的形式。HTML文档解析的时候，Vue会自动将Mustache标签内的属性名替换为对应数据对象中的属性（property）值。只要数据对象中的属性（
Vue插值指令3
m0_44974944的博客
09-24 143
Vue插值指令3 1.v-if、v-else v-if条件为false时，不会有元素在dom中。（当只有一次切换时，使用v-if） <body> <div id="app"> <h2 v-if="scroce>=90">优秀</h2> <h2 v-else-if="scroce>=80">很好</h2> <h2 v-else="scroce>=70"&
github资源，自用，face-api演示使用项目
12-28
【标题】"github资源，自用，face-api演示使用项目" 这个标题暗示了这是一个与GitHub相关的项目，主要用于个人使用，且涉及到"face-api"的演示和应用。"Face-api"是一个JavaScript库，专用于在浏览器环境中实现人脸...
自用rdma-core-35源码
最新发布
06-11
8. **多协议支持**：除了InfiniBand，rdma-core还支持RoCE（RDMA over Converged Ethernet），这使得RDMA技术能够在更广泛的标准以太网环境中使用。 9. **内存管理**：RDMA的一个关键特性是直接内存访问，因此rdma-...
平台开发-自用工具---
12-11
在“平台开发-自用工具---”的上下文中，我们可以理解为开发者正在构建或使用一套量身定制的工具集合，以提升其在Java平台开发中的生产力和效果。这可能包括对现有工具的增强、定制化脚本的编写以及工作流程的优化，...
自用-服务器搭建sdwebui流程
12-18
自用-服务器搭建sdwebui流程
Vue插值表达式及常用指令
qq_44741577的博客
02-01 1944
插值表达式是vue框架提供的一种在html模板中绑定数据的方式，使用。
vue常用指令及插值语法
木易的博客
08-05 1736
最近这段时间不是很忙，多少想写点东西，思来想去，还是对平时开发项目中用到的vue框架做点小总结吧，总结的知识点会很杂很碎，但都是基础，对需要入门的伙伴，或者长时间不使用的伙伴都会有些帮助，也算是自己的一个复习吧。话不多说，下面开始，这个章节 主要写些vue中常用的指令，及插值语法（或者说是插值表达式）： 1 插值语法（插值表达式） 由于vue是基于数据驱动的，所以当我们需要在页面中显示一段文本时，可以使用如下操作： export default { data(){ retur
系统学习VUE--（1）基本操作及指令、插值
yuran1的博客
04-12 849
先来张图，以最简单的方式分析VUE的工作流程，并提出两个问题。本文的重点就是对这两个问题进行分析。 问题1：什么是模板语法？怎么使用？ 模板语法包括两个部分：指令和插值
插值语法与指令语法
qq_50768380的博客
09-29 540
2.v-model.value可以简写成v-model，因为v-model默认收集的就是value的值。//el用于指定当前vue实例为哪个容器服务,值通常为css选择器字符串。//el用于指定当前vue实例为哪个容器服务,值通常为css选择器字符串。//el用于指定当前vue实例为哪个容器服务,值通常为css选择器字符串。//data用于存储数据,数据供el所指定的容器使用。//data用于存储数据,数据供el所指定的容器使用。//data用于存储数据,数据供el所指定的容器使用。
插值表达式、指令、元素属性绑定-vue2
qq_47455650的博客
08-29 291
普通插值表达式插入数据: 在标签尖括号中使用{{}}插入js表达式:变量,函数调用,三目运算等等,插值表达式中的标识符 代表vue对象中的data的属性名或者methods中的方法名。
vue的插值语法，vue指令系统，style和class
冰冰凉沉甸甸的博客
01-06 453
官网：https://cn.vuejs.org/文档3：https://cn.vuejs.org/文档2：https://v2.cn.vuejs.org/
Vue学习笔记（一）插值语法和指令
weixin_46015333的博客
12-31 2727
文章目录一、Vue是什么？二、知识点2.1.基础结构2.2.模板语法2.2.1.插值语法{{}}2.2.指令v-htmlv-oncev-bindv-if 、v-else-if、v-elsev-showv-on:clickv-for总结 一、Vue是什么？ Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各
VUE指令及用法大全——（一）插值表达式
热门推荐
最初都是小白
04-08 1万+
  插值表达式
Matlab中插值函数汇总和使用说明
yongqing2010的专栏
09-26 8753
转载http://blog.sciencenet.cn/blog-457143-679275.html Matlab中插值函数汇总和使用说明 MATLAB中的插值函数为interp1，其调用格式为：  yi= interp1(x,y,xi,'method')            其中x，y为插值点，yi为在被插值点xi处的插值结果；x,y为向量， 'meth
自定义数据集：自用-ref-npr训练流程详解
自用-ref-npr自采集数据训练流程是一种针对特定应用场景的深度学习方法，主要用于利用用户自己采集的数据进行模型训练。这个流程主要涉及以下几个关键步骤： 1. **自定义数据集准备**： - 用户需按照Plenoxel项目...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值