Vue的一些输出指令

{{字段}}，v-text指令，v-html指令

<html>
<head><meta name="viewport" content="width=device-width" /><title>Vue.js学习第二课</title><!--1.导入vue包--><script src="~/Scripts/vue/vue.min.js"></script><style>[v-cloak] {display:none;}</style>
</head>
<body><div id="divApp">@*使用v-cloak 能够解决插值表达式的闪烁问题，即当网络等原因，导致需要获取的数据加载较慢时，为了不显示{{msg}}这个字符串出来，让它在加载完成前先隐藏*@<!--{{msg}}前后的加减号，不会因为加载数据而被覆盖--><p v-cloak>+++{{msg}}---</p><!--v-text指令，效果跟上面一样，但是默认没有闪烁问题--><!--v-text指令，会覆盖元素中原本的内容--><h4 v-text="msg"></h4><!--会解析数据中的html，而上面2个都不可以--><div v-html="msg2"></div></div><script>var v = new Vue({el: '#divApp',data: {msg: '我只有在加载完成后才显示',msg2: '<h1>哈哈哈哈，我是H！</h1>'}})</script>
</body>
</html>

总结一下，大部分情况下都是用{{}}的方式输出数据，考虑到闪烁的问题，需要用上v-cloak来控制加载完成前的样式比较好。

{{}}方式是在指定位置输出内容，而v-text作为元素的指令，控制的是整个元素的文本内容，如果之前有内容，会进行覆盖，但是不会有闪烁问题。因此根据不同的场景和内容拼接的复杂情况，选择不同的方式。

v-html指令则是可以输出Html，例如例子中的<H1>标签，不然就会被当作文本输出了。

运行结果

Vue.js 学习笔记一

Vue.js 学习笔记三，一些基础指令，v-bind,v-on

转载于:https://www.cnblogs.com/luyShare/p/11528424.html

Vue.js 学习笔记二，一些输出指令相关推荐

Vue.js 学习笔记三，一些基础指令，v-bind,v-on
在笔记二的基础上继续写 v-bind指令,为属性绑定数据 <div v-html="msg2" v-bind:title ...
Vue.js 学习笔记一
上手前的一些概念为啥要用Vue.js Vue.js 是目前最流行的前端框架之一,专注于视图层,容易上手. 使用Vue.js,通过框架提供的指令可以减少很多DOM操作(数据的双向绑定),提高渲染效率, ...
Vue.js 学习笔记十一自定义指令
之前看到过v-bind,v-on等指令,Vue还可以自定义指<div id="divApp" <div v-focus></div> & ...
Vue.js 学习笔记十二 Vue发起Ajax请求
首先需要导入vue-resource.js,可以自己下载引入,也可以通过Nuget下载,它依赖于Vue.js. 全局使用方式: Vue.http.get(url,[options]).then(suc ...
Vue.js 学习笔记四用一，二，三的知识做个跑马灯
做个简单的跑马灯效果页面定义2个按钮,绑定2个方法. <div id="divApp"><input type="button" value ...
Vue.js学习笔记 2022 04 17
Vue.js学习笔记 1 Vue.js基础 Vue.js介绍 vuejs 渐进式 JavaScript 框架 Vue.js 如何应用 1 在普通html项目中,引入VUE.JS Hb 的项目生成的 ...
遇见 vue.js --------阿文的vue.js学习笔记（4）------模板语法
** 新学习新征程,我们一起踏上学习 vue.js的新长征遇见 vue.js --------阿文的vue.js学习笔记(1)-----初识vue.js 遇见 vue.js --------阿文的v ...
Vue.js 学习笔记十自定义按键事件
<div id="divApp"><input type="text" v-on:keyup=& ...
Vue.js 学习笔记九 v-if和v-show
<p v-if="flag">v-if</p><p v-show="flag">v-show</p> flag是 ...

Vue.js 学习笔记二，一些输出指令

Vue.js 学习笔记一

Vue.js 学习笔记二，一些输出指令相关推荐

最新文章

热门文章

Vue.js 学习笔记 二，一些输出指令

Vue.js 学习笔记 一

Vue.js 学习笔记 二，一些输出指令相关推荐

最新文章

热门文章

Vue.js 学习笔记二，一些输出指令

Vue.js 学习笔记一

Vue.js 学习笔记二，一些输出指令相关推荐