v-bind 可以实现动态改变属性的属性值
1.基础用法:
后期可以通过操作app.msg动态改变src的属性值
<div id="ve">
<!-- 冒号是v-bind是简写 -->
<img :src="msg">
</div>
<script>
const app = new Vue({
el: '#ve',
data: {
msg: 'img/1.jpg',
}
});
</script>
2.可以动态绑定class
json语法
css样式
<style>
.red {
color: red;
}
.big {
font-size: 22px;
}
</style>
div被绑定上了red属性 若此时修改app.isbig为true可以动态绑定class属性
<div id="ve">
<div :class="{red:isred,big:isbing}"> v-bind </div>
</div>
<script>
const app = new Vue({
el: '#ve',
data:{
isred:true,
isbig:false,
}
});
</script>
以上代码可以优化为:
<div id="ve">
<div :class="getClasses()"> v-bind </div>
</div>
<script>
const app = new Vue({
el: '#ve',
data: {
isred: true,
isbig: false,
},
methods: {
getClasses: function () {
return { red: this.isred, big: this.isbing };
}
}
});
</script>
Array语法
这样写div 被绑定上了俩个属性值 动态改变app,arr中的元素改变属性
<div id="ve">
<div :class="arr"> v-bind </div>
</div>
<script>
const app = new Vue({
el: '#ve',
data: {
isred: true,
isbig: false,
arr:['red','big']
},
methods: {
getClasses: function () {
return { red: this.isred, big: this.isbing };
}
}
});