vue常见指令之v-cloak、v-text、v-html、v-bind和v-on

<style>
[v-cloak]{display:none}
</style>
<body>
    <div id="app">
      <p v-cloak>{{msg}}</p>
      <p v-text="msg"></p>
      <p v-html="msg2"></p>
    </div>
<script>
var app=new vue({
el:#app
data:{
msg：“哈哈哈”；
msg2：“<h1>哈哈哈</h1>”
}
})
</script>
</body>

v-cloak：解决闪烁问题

当网速较慢时，vue加载较慢，插值表达式渲染的数据就会产生闪烁，使用v-cloak指令加上如上样式可以解决该问题

v-text：插入文本字符串

v-text默认就没有闪烁，但是会以文本字符串的方式覆盖所在元素的文本

v-html：插入html

v-html与v-text的不同在于插入的是html。

v-bind：绑定属性

在vue中想要让属性如title等于data对象中的一个变量（键），会被直接当作字符串显示出来，这时就要用到v-bind，v-bind可以将绑定的属性值当作变量对待，在data对象中去找。

<input type="button" value="按钮"  v-bind:title="data对象中的变量"/>

v-bind:可以简写成：

v-on：绑定方法

与v-bind的不同之处在于v-on绑定的是方法，会在methods对象中寻找变量。可以缩写为@

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容