Vue指令v-bind
1、v-bind的介绍及使用
作用:动态地绑定一个或多个属性,或者一个组件prop到表达式。
语法:在元素上添加v-bind:属性名=”常量||变量名”。
简写格式: :属性名=”变量名”。
举例1:
<div id="app">
<a v-bind:href="uhref">
<img :src="url">
</a>
</div>
<script src="./Vuejs/vue2-6-12.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
uhref:"https://www.baidu.com",
url:"https://www.baidu.com/img/PCpad_012830ebaa7e4379ce9a9ed1b71f7507.png"
}
})
</script>
举例2:
<style>
img{
width: 50px;
height: 30px;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in url">
{{item}}
<!-- <img :src="{{item}}"> -->
<img :src="item">
</li>
</ul>
</div>
<script src="./Vuejs/vue2-6-12.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
url:[
"http://pic.87g.com/upload/2017/0421/20170421041557991.jpg",
"http://n.sinaimg.cn/games/20161109/iTmH-fxxneua4523465.jpg",
"http://i1.073img.com/131108/4343693_153504_1.jpg"
]
}
})
</script>
</body>
上面例子中,我们不能直接让v-bind:src的值为{{item}},而是让它的值直接为item,因为v-bind:src它不接收字符串,使用{{item}}的话,{{item}}输出的是字符串格式,而item是变量,是可以被接收的,因此这里最后使用的是item。
2、动态绑定class
v-bind动态绑定class:对象,使用数组来罗列多个绑定的类名。
举例:
<style>
.red{
color: red;
}
.italic{
font-style: italic;
}
</style>
</head>
<body>
<div id="app">
<h2 :class="['red','italic']">加油</h2>
</div>
<script src="./Vuejs/vue2-6-12.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
}
})
</script>
这里我们需要注意的是必须要创建一个Vue对象来和#app元素绑定,不然的话是无法使用v-bind来动态绑定class的。
还有一点需要知道的是,只有当我们绑定的类的值为true时,才会将该属性值添加到class里面,当为false时,则不会添加该属性值。
<style>
.red{
color: red;
}
.italic{
font-style: italic;
}
</style>
</head>
<body>
<div id="app">
<h2 :class="['red','italic']">加油</h2>
<h2 :class="['red',{'italic':bool}]">加油</h2>
</div>
<script src="./Vuejs/vue2-6-12.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
bool:false
}
})
</script>
举例:动态绑定class时,使用三元表达式来绑定类名
<div id="app">
<h2 :class="['red','italic']">加油</h2>
<h2 :class="['red',{'italic':bool}]">加油</h2>
<h2 :class="[bool?'red' : 'italic']">加油</h2>
</div>
<script src="./Vuejs/vue2-6-12.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
bool:false
}
})
</script>
我们还可以使用对象的方式来添加class属性。
<div id="app">
<h2 :class="['red','italic']">加油</h2>
<h2 :class="['red',{'italic':bool}]">加油</h2>
<h2 :class="[bool?'red' : 'italic']">加油</h2>
<h2 :class="classobj">加油</h2>
</div>
<script src="./Vuejs/vue2-6-12.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
bool:false,
classobj:{
red:true,
italic:true,
}
}
})
</script>
3、动态绑定style
举例1:动态绑定style
<div id="app">
<h2 :style="{'color':'red'}">加油</h2>
</div>
<script src="./Vuejs/vue2-6-12.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
}
})
</script>
举例2:使用数组动态绑定style
<div id="app">
<h2 :style="[sobj1,sobj2]">加油</h2>
</div>
<script src="./Vuejs/vue2-6-12.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
sobj1:{
color:"red"
},
sobj2:{
// 注意一下,我们必须使用驼峰命名
fontSize:"50px"
}
}
})