v-bind可以绑定标签上的任何属性
动态绑定图片的路径
Bash
<img id=“app” v-bind:src="src" />
<script>
var vm = new Vue({
el: '#app',
data: {
src: '1.jpg'
}
});
</script>
绑定a标签上的id
Bash
<a id="app" v-bind:href="'del.php?id=' + id">删除</a>
<script>
var vm = new Vue({
el: '#app',
data: {
id: 11
}
});
</script>
绑定class
对象语法
Bash
<div id="app" v-bind:class="{active: isActive}">
hei
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
isActive: true
}
});
</script>
数组语法
Bash
<div id="app" v-bind:class="[activeClass, dangerClass]">
hei
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
activeClass: 'active',
dangerClass: 'text-danger'
}
});
</script>
绑定style
对象语法
Bash
<div id="app" v-bind:style="{color: redColor, fontSize: font + 'px'}">
hei
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
redColor: 'red',
font: 40
}
});
</script>
数组语法
Bash
<div id="app" v-bind:style="[color, fontSize]">abc</div>
<script>
var vm = new Vue({
el: '#app',
data: {
color: {
color: 'red'
},
fontSize: {
'font-size': '18px'
}
}
});
</script>
v-bind简化语法
Bash
<div id="app">
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
imageSrc: '1.jpg',
}
});
</script>
发表评论