使用vue指令之前需要先引入一个vue.js文件
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
这是我在例子中用到的cdn,也可自行到vue官网找别的cdn。
vue指令之v-bind
1.v-bind 绑定属性 (v-bind <==> : )
class绑定 [ ] { }
style绑定 [ ] { }
缩写:":"
<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">
<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName">
:class绑定不会替换掉原有的class样式
例子:
html:
<div id="app">
//可以使用对象来判断是否添加class样式{red:flag}
<span :class="[{red: flag}, spanwidth]" class="red">vueclass样式绑定</span>
</div>
也可以使用三目运算进行判断是否添加样式: [flag ? ‘red’ : ’ ']
还可以使用 &&进行判断: [ flag && ‘red’]
js:
var vm = new Vue({
el:"#app",
data:{
flag:ture,
spanwidth:'width',
}
})
:style绑定会替换掉原有的style的属性值
例子:
html:
<div id="app">
<img :style="[{width: width}, blue]" style="width:100px;">
</div>
js:
var vm = new Vue({
el:"#app",
data:{
width:'200px',
blue:{
border:1px solid black;
},
}
})
//点击切换背景色的一个小例子
css:
.green{
background-color: green;
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
html:
<div id="app">
<button @click="handleClick($event, 2)">点击</button>
<span :class="spanClassArr[spanIndex]"> {{ name }}</span>
</div>
js:
<script>
var vm = new Vue({
el : '#app',
data : {
name: "我就是我",
spanClassArr: [ 'red' , 'green' ,'blue' ],
spanIndex:0,
spanCount:0,
},
methods: {
handleClick (e, num){
console.log(e, num)
// this == vm
this.spanIndex =++ this.spanCount % 3;
}
}
})
</script>