1 v-bind基本用法,动态绑定属性,例如a元素标签的href属性,img和video元素标签的src属性。语法糖 ‘:’
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-bind基本使用</title>
</head>
<body>
<div id = "app">
<a v-bind:href="aHref" >百度一下,你就知道</a>
<img v-bind:src="imgURL" alt="">
<video v-bind:src="videoURL" controls></video>
<!--v-bind 的语法糖 :-->
<a :href="aHref" >百度一下,你就知道</a>
<img :src="imgURL" alt="">
<video :src="videoURL" controls></video>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
aHref:'http://www.baidu.com',
imgURL:'……', <!--自己输入一个图片地址-->
videoURL:'……' <!--视频地址-->
}
})
</script>
</body>
</html>
页面展示:
2.v-bind绑定class(对象语法)
用法:
- 直接通过{}绑定一个类
<h2 :class=”{‘active’:isActive}”>hello world </h2>
- 通过判断,传入多个值
<h2 :class=”{‘active’:isActive,’line’:isLine}”>hello world </h2>
- 和普通的类同时存在不产生冲突(如果isActive和isLine都为true时,将同时存在title/active/line三个类)
<h2 class=”title” :class=”{‘active’:isActive,’line’:isLine}”>hello world </h2>
- 如果过于复杂,可以放在一个methods或者computed中(classes是一个计算属性)
<h2 class=”title” :class=”classes”>hello world </h2>
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.active{
color: red;
}
</style>
</head>
<body>
<div id = "app">
<!--<h2 v-bind = "{key1:value1,key2:value2}">{{message}}</h2>-->
<!--<h2 v-bind = "{类名1:Boolean,类名2:Boolean}">{{message}}</h2>-->
<h2 :class="{active:isActive,line:isLine}">{{message}}</h2>
<h2 :class="getClasses()">{{message}}</h2>
<button v-on:click="btnClink">变色儿</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:"hello",
isActive:true,
isLine:true
},
methods:{
btnClink:function () {
this.isActive = !this.isActive
},
getClasses:function () {
return {active:this.isActive,line:this.isLine}
}
}
})
</script>
</body>
</html>
3.v-bind绑定class(数组语法)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
</head>
<body>
<div id = "app">
<!-- '' 字符串-->
<h2 class="title" :class="['active','line']">{{message}}</h2>
<!-- 变量 -->
<h2 class="title" :class="[active,line]">{{message}}</h2>
<h2 class="title" :class="getClasses()">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:"hello",
active:'sssss',
line:'eeeee'
},
methods:{
getClasses:function () {
return [this.active,this.line]
}
}
})
</script>
</body>
</html>
4.v-bind绑定style(对象语法)
:style="{key(css的属性名):value(css的属性值)}"
注意:当:style中的value不加 ‘’ 时,会被认为时data中的一个变量被解析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id = "app">
<!--<h2 v-bind:style="{key(css的属性名):value(css的属性值)}">{{message}}</h2>-->
<!--当50px不加‘’时,会被认为是data中的一个变量被解析-->
<h2 v-bind:style="{fontSize:'50px'}">{{message}}</h2>
<!--data的finalSize中的数据为‘100px’时-->
<h2 v-bind:style="{fontSize:finalSize}">{{message}}</h2>
<!--data的finalSize中的数据为100时,这里的finalSize后面要跟上单位-->
<h2 v-bind:style="getStyles()">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:"hello",
finalSize:100,
finalColor:'red'
},
methods:{
getStyles:function () {
return {fontSize:this.finalSize + 'px',background:this.finalColor}
}
}
})
</script>
</body>
</html>
5.v-bind绑定style(数组语法)
在data中定义好该变量的属性,在:style=”[]”中将变量写入,多个值以 , 分割
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id = "app">
<h2 :style="[baseStyle1,baseStyle2]">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:"hello",
baseStyle1:{background:'red'},
baseStyle2:{fontSize:'100px'}
}
})
</script>
</body>
</html>