推荐：Vue汇总
Vue - v-bind
v-bind 使用
v-bind可以动态地绑定一个或多个attribute。
在绑定class或style这种attribute时，支持其它类型的值，如数组或对象。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-bind</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="div">
<img v-bind:src="imgsrc">
</div>
</body>
</html>
<script>
var vue = new Vue({
el: '#div',
data: {
imgsrc: 'https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1746429185,3447265728&fm=26&gp=0.jpg'
}
})
</script>
效果：
简写
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-bind</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="div">
<img :src="imgsrc">
</div>
</body>
</html>
<script>
var vue = new Vue({
el: '#div',
data: {
imgsrc: 'https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1746429185,3447265728&fm=26&gp=0.jpg'
}
})
</script>
:是v-bind:的简写形式，代码效果也是一样的。
内联字符串拼接
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-bind</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="div">
<img :src="'https://dss1.bdstatic.com/' + imgsrc">
</div>
</body>
</html>
<script>
var vue = new Vue({
el: '#div',
data: {
imgsrc: '70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1746429185,3447265728&fm=26&gp=0.jpg'
}
})
</script>
效果也是一样的。
class 绑定
可通过数组或对象进行绑定。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-bind</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="div" :class="['class1' , 'class2' , 'class3']">
</div>
</body>
</html>
<style type="text/css">
.class1{
background-color: red;
}
.class2{
border: 2px solid black;
}
.class3{
width: 50%;
height: 100px;
}
</style>
<script>
var vue = new Vue({
el: '#div'
})
</script>
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-bind</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="div" :class="{'class1' : true , 'class2' : true , 'class3' : class3}">
</div>
</body>
</html>
<style type="text/css">
.class1{
background-color: red;
}
.class2{
border: 2px solid black;
}
.class3{
width: 50%;
height: 100px;
}
</style>
<script>
var vue = new Vue({
el: '#div',
data: {
class3: true
}
})
</script>
效果也是一样的。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-bind</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="div" :class="['class1', {'class2' : true , 'class3' : class3}]">
</div>
</body>
</html>
<style type="text/css">
.class1{
background-color: red;
}
.class2{
border: 2px solid black;
}
.class3{
width: 50%;
height: 100px;
}
</style>
<script>
var vue = new Vue({
el: '#div',
data: {
class3: true
}
})
</script>
效果也是一样的。
style 绑定
其实和class绑定用法差不多，这里就简单介绍一下。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-bind</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="div">
<p :style="[{fontSize : size + 'px'} , colorObject]">Kaven</p>
</div>
</body>
</html>
<script>
var vue = new Vue({
el: '#div',
data: {
size: 50,
colorObject: {
color: 'red'
},
}
})
</script>
效果如下图：
绑定全是attribute的对象
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-bind</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="div">
<p v-bind="{style : styleObject , class : class1}">Kaven</p>
</div>
</body>
</html>
<style type="text/css">
.class1{
border : 2px solid black;
}
.class2:hover{
border: none;
}
</style>
<script>
var vue = new Vue({
el: '#div',
data: {
styleObject: {
color: 'red',
fontSize : '50px'
},
class1: ['class1' , 'class2']
}
})
</script>
效果如下面两张图：
鼠标不放在框区域内。
鼠标放在框区域内，效果和预期一样。
单向绑定
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-bind</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="div">
<input type="text" v-bind:value="inputValue">
</div>
</body>
</html>
<script>
var vue = new Vue({
el: '#div',
data: {
inputValue: 'kaven'
}
})
</script>
改变inputValue的值，输入框的值会跟着变。
而改变输入框中的值，inputValue的值不会跟着变，这就是v-bind的单向绑定。
v-bind的使用就介绍到这里。
写博客是博主记录自己的学习过程，如果有错误，请指正，谢谢！
