vue 插值，v-once,v-text, v-html

灰太狼 2021-03-16 16:04 418阅读 0赞

**引入Vue.js ，通过script形式，vue官网语法记录**

创建vue应用，数据和 DOM 已经被建立了关联，所有东西都是响应式的

**1：插值**

缺点：让你的网速慢，或者数据加载失败时，会在浏览器中直接渲染插值【js禁用，javascript报错也会导致这个问题】

html：

<section id="content">
    <p id="Mustache">没有v-once, {
         {msg}}</p>
    </section>

js:

var vm = new Vue({ 
	 el:"#content", 
		 data: { 
		 	msg: "hello my lord"

} 
	});

result：

![990621-20180104145821518-271753256.png][]

**2：v-once:通过使用 v-once 指令,执行一次性的插值【当数据改变时，插值处的内容不会继续更新】**

**html:**

<section id="content">
     插值: 
	 <p id="Mustache">{
         {msg}}</p>
         <p>v-once:当数据改变时，插值处的内容不会更新</p>
         <span v-once>{
         {msg}}</span>
     </section>

js:

var vm = new Vue({
	el:"#content", 
		data: { 
			msg: "hello once"
		 } 
	 });

result:

![990621-20180104155050065-1855407954.png][]

3、v-text和v-html

html:

<section id="content">
     v-text： 3     <span v-text="tipHtml"></span><br>
     原始 HTML:v-html指令 5     <span v-html="tipHtml"></span>
     </section>

js:

var vm = new Vue({ el:"#content", data: { tipHtml: "<b>小心点，明天</b>" } });

结果：

![990621-20180104155922268-1304997275.png][]

**总结：v-text:会把html标签也解析为文本，而v-html可以解析html标签。**

[990621-20180104145821518-271753256.png]: /images/1615910570084.png
[v-once]: https://cn.vuejs.org/v2/api/#v-once
[990621-20180104155050065-1855407954.png]: /images/1615910548235.png
[990621-20180104155922268-1304997275.png]: /images/1615910529932.png

发表评论取消回复

表情：

评论列表（有 0 条评论，418人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue的指令和插值总结

![在这里插入图片描述][f91c9e60318d4dc09d27d0ad25b7e48e.jpeg_pic_center] -------------------- 文

迈不过友情╰/ 2024年04月01日 08:48/ 0 赞/ 79 阅读

相关 Vue.js中的插值(插值表达式)和使用JavaScript表达式

下面demo中使用 \{ \{\}\} 的形式在 html 中获取实例对象对象中 data 的属性值；这种使用 \{ \{\}\} 获取值得方式，叫做插值或插值表达式

迈不过友情╰/ 2024年03月22日 16:00/ 0 赞/ 132 阅读

相关 Vue模板-插值表达式详解

聚沙成塔·每天进步一点点本文内容 ⭐ 专栏简介基本用法表达式与操作插值表达式中的方法调用注意事项

比眉伴天荒/ 2024年02月05日 22:56/ 0 赞/ 62 阅读

相关 arcgis--空间插值（确定性插值）

![在这里插入图片描述][dd693f66b25d49ae8f3f368f6e1ea965.png] ![在这里插入图片描述][bbf39933cd2c480296d53f

忘是亡心i/ 2023年09月26日 11:08/ 0 赞/ 74 阅读

相关二次插值、线性插值、拉格朗日插值

实际开发中需要用到二次插值算法，在网上找了一圈，还是觉得这个好用，下面是这个博文的链接： [线性插值、二次插值、拉格朗日插值][Link 1] [Link 1]: ht

╰+哭是因爲堅強的太久メ/ 2022年10月16日 00:52/ 0 赞/ 210 阅读

相关 Vue插值语法

> Vue的插值语法：\{ \{\}\} chacao中需要写 js 表达式，且能够自动读取到data中定义的属性  <div

以你之姓@/ 2022年09月14日 01:59/ 0 赞/ 203 阅读

相关 03vue_模板语法_插值

模板语法 Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，

痛定思痛。/ 2022年05月31日 10:23/ 0 赞/ 228 阅读

相关 Vue框架整理：插值、表达式与过滤器

![这里写图片描述][70] 插值与表达式 1、双大括号：\{ \{ \}\} 是最基本的“文本”插值方法，能够实时显示我们需要的数据 <scr

我不是女神ヾ/ 2022年05月23日 13:51/ 0 赞/ 243 阅读

相关 8.插值---(vue入门文档学习记录)

文本数据绑定最经常用的就是"Mustache"语法(两个大括号)的文本插值,注意这里特别标明只是文本插值,如果是html格式也会只显示文本. <span>Mess

爱被打了一巴掌/ 2022年01月12日 12:29/ 0 赞/ 322 阅读

相关 Vue.js--插值与表达式

使用双大括号(Mustache语法) "\{ \{\}\}"是最基本的文本插值方法，它会自动将我们双向绑定的数据实时显示出来，例如： <div id="myApp">

Bertha 。/ 2021年08月13日 12:57/ 0 赞/ 438 阅读