目录
v-bind:单向数据绑定
样式如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<style>
img {
width: 100px;
}
.red {
width: 100px;
height: 100px;
background-color: red;
}
.box {
border-radius: 50%;
}
.box1 {
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
<body>
</body>
</html>
绑定一个属性
<img v-bind:src="imageSrc">
<!-- v-bind 简写 : -->
<img :src="imageSrc">
内联字符串拼接
<!-- 使用内联字符串拼接来动态生成image元素的src属性: -->
<img :src="'../img/good4' +jpg">
class 绑定
<!-- 绑定单个动态类名时 :class="类名变量"-->
<div :class="redclass"></div><br>
<!-- 绑定多个动态类名时 :class="[类名变量1,类名变量2]" -->
<div :class="[redclass,boxclass]"></div><br>
<!-- 同时绑定静态+动态类名时 :class='['静态类名',动态类名变量]'-->
<div :class="['box1',boxclass]">1</div><br>
<div :class="boxclass" class="box1">2</div>
style 绑定
<div v-bind:style="[baseStyles, overridingStyles]">娃哈哈,娃哈哈</div>
在v-bind指令中使用逻辑判断时
<div :class="[num==1?'red':'']"></div>
<script>
new Vue({
el: '#root',
data: {
imageSrc: '../img/good4.jpg',
jpg: '.jpg',
redclass: 'red',
boxclass: 'box',
num: 1,
baseStyles: {
color: 'green',
fontSize: '30px'
},
overridingStyles: {
'font-weight': 'bold'
}
}
})
</script>
效果如下