vue中的常用指令(上)
程序员文章站
2022-05-15 13:45:52
...
先做一下基本的结构
<script>
var vm = new Vue({
el:'#app',
data:{
msg1 : '大家好,我是msg1',
msg2 : '<h1>大家好,我是msg2</h1>',
title : '这是一个自定义的title'
},
methods : {
show:function(){
alert("hello,mother fuck!")
}
}
})
</script>
- v-cloak和v-txet
使用v-cloak可以解决插值表达式闪烁的问题
默认v-text也没有闪烁的问题
<div id="app">
<p>{{msg1}}</p>
<p v-cloak>-----{{msg1}}------</p>
<div v-text = "msg1">===========</div>
</div>
二者对比如下:
可以看出:v-text会覆盖元素原来的内容,但是v-cloak只会替换自己的这个占位符,不会把整个元素清空
2. v-html
v-html与前两者的用法相同,但是它能够往页面中添加标签混合元素
3. v-bind和v-on
①v-bind是为元素绑定属性(简写为:)
②v-on是为元素添加事件(简写为@)
<input type="button" value = "绑定属性" v-bind:title = "title">
<input type="button" value = "演示" v-on:click = "show">
上一篇: 入门linux系统之 FTP、 NFS、 静态站点小集合篇
下一篇: Mac常用命令