vue学习笔记-常用指令
v-once
只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
v-html
内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html
<div id="app">
{{msg}}
<p>Using mustaches: {{ rawHtml }}</p>
<p v-html="rawHtml"></p>
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
rawHtml : '<span style="color:red">this is should be red</span>'
}
});
效果区别：
Using mustaches: <span style="color:red">this is should be red</span>
this is should be redv-bind
动态地绑定一个或多个特性，或一个组件 prop 到表达式。
在绑定 class 或 style 特性时，支持其它类型的值，如数组或对象。可以通过下面的教程链接查看详情。
在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。
没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。
<div id="app">
<div v-bind:class="color">test...</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
}
});
</script>
<style type="text/css">
.red{color:red;}
.blue{color:blue; font-size:100px;}
</style>效果：
v-text
效果类似于{{aaa}}动态切换变量内容
<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-02-15 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读