v-bind的使用
v-bind
v-bind的引入
内容的绑定可以通过mustache语法,而属性的绑定往往需要通过v-bind
-
如动态绑定img的src属性
-
如动态绑定div的class属性
-
如动态绑定li元素的style属性
动态绑定src属性
<div id="app">
<img v-bind:src="imgURL" alt="">
<!-- v-bind的语法糖写法::,v-bind可以省略 -->
<a :href="aHerf">百度一下</a>
</div>
<script type="text/javascript">
const app = new Vue({
el: "#app",
data: {
imgURL: "img/15.jpg",
aHerf: "http://www.baidu.com'>",
message: "你好",
isActive: true,
isLine: true,
finalSize:'20px',
baseStyles:{color:'red', backgroundColor:'green'}
}
})
</script>
动态绑定class
①对象语法
-
<h2 :class="{类名1:boolean, 类名2:boolean, 类名3:boolean}"></h2>
-
语法说明:当类名为true时,就会将对应的类名添加到该元素的class中,不会覆盖原先的class
<style type="text/css">
.active {
color: red;
}
.line {
text-decoration: underline;
}
</style>
<div id="app">
<h2 :class="{active: isActive, line: isLine}">{{message}}</h2>
</div>
- 如果觉得对象语法过于复杂,还可以把它封装为一个方法使用或计算属性
//封装为方法
<div id="app">
<h2 :class="getClasses()">{{message}}</h2>
</div>
<script type="text/javascript">
const app = new Vue({
methods: {
getClasses() {
return {
active: this.isActive,
line: this.isLine
}
}
}
})
</script>
// 封装为计算属性
<div id="app">
<h2 :class="classes">{{message}}</h2>
</div>
<script type="text/javascript">
const app = new Vue({
computed: {
classes() {
return {
active: this.isActive,
line: this.isLine
}
}
}
})
</script>
②数组语法
-
如果始终要为某个属性绑定一个或多个类,可以使用数组语法
-
数组语法相对于对象语法更简洁,缺陷是一旦绑定后该类就会始终存在
<h2 :class="['active','line']">{{message}}</h2>
动态绑定style
①对象语法
-
<h2 :style="{key(属性名1):value(属性值1), 属性名2:属性值2, 属性名3:属性值3}"></h2>
-
语法说明:为元素添加样式。属性名即为样式名,可用驼峰命名或中间添加连接符'-'命名
<div id="app">
<!-- 30px必须加上单引号,否则会被当做变量解析而报错 -->
<h3 :style="{fontSize:'30px'}">{{message}}</h3>
<h3 :style="{fontSize:finalSize}">{{message}}</h3>
②数组语法
- 与class的数组语法类似
<h3 :style="[baseStyles]">{{message}}</h3>