Vue其他常用指令
v-bind:将变量中的值通过v-bind绑定到元素指定的属性
eg:v-bind:style v-bind:class
v-bind也支持简写(v-on:相当于 :)
v-show:v-show=“表达式” ,根据表达式执行的结果的真假,来切换display显示还是隐藏
v-text:v-text=“变量”,根据变量更新对应的文本内容
v-html:v-html=“变量”,根据变量更新对应的innerHTML
例子:
<body>
<div id="container">
<h1>{{msg}}</h1>
<!-- v-bind实现将变量中值 绑定到属性 -->
<img v-bind:src="'img/'+imgUrl" width=50px height=50px>
<a v-bind:href="myLink">tiaozhuan</a>
<button v-on:click="modifyBGColor">修改背景色</button>
<h1 v-bind:style="{backgroundColor:myBGColor}">背景色会被修改</h1>
<p v-bind:class="{myRed:isRed}">我的字体会变颜色</p>
<button v-bind:disabled="!isValid">clickMe</button>
<button v-show="hasMore">加载更多</button>
<p v-show="!hasMore">没有更多的数据可以加载</p>
<div v-html="myHtml"></div>
</div>
<script>
new Vue({
el: "#container",
data: {
msg: '麻子',
imgUrl: '1.jpg',
myLink: 'http://www.baidu.com',
myBGColor: "#ff0000",
isRed: false,
isValid: false,
hasMore: true,
myHtml: "<h1>我是麻子</h1>"
},
methods: {
modifyBGColor: function () {
this.myBGColor = "#0000ff"
}
}
})
</script>
</body>