利用v-bind的话vue可以进行标签的属性绑定,如下:
<body>
<div id="app">
<img v-bind:src="imgSrc" alt="">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
imgSrc: "./xv.png"
}
})
</script>
</body>
可以看到给src这个属性绑定的值
其中v-bind:src
可以缩写成:src
还支持判断条件做出改变,如下:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.active{
border: 2px solid red;
}
</style>
</head>
<body>
<div id="app">
<img :src="imgSrc" alt="" :class="isActive ? 'active' : '' ">
<button @click="change">点击切换样式</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
imgSrc: "./xv.png",
isActive: false
},
methods: {
change: function() {
this.isActive = !this.isActive
}
}
})
</script>
</body>
新增加了isActive来改变true和false,利用v-bind:class
或者缩写:class
来做判断,如果isActive是true,那么class就是active,然后图片的边框就是红色, 否则就是空,啥也没有
以上的三木表达式的写法看起来有点麻烦,vue给我们提供了更简单的写法
这两种写法的效果一样
<div id="app">
<img :src="imgSrc" alt="" :class="isActive ? 'active' : '' ">
<img :src="imgSrc" alt="" :class="{active:isActive}">
<button @click="change">点击切换样式</button>
</div>