利用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>
