v-bind 主要用于属性绑定,比方你的class属性,style属性,value属性,href属性等等
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<script src="../js/vue.js"></script>
<title>v-bind</title>
</head>
<body>
<input id="app" v-bind:value="message"> 使用 </input>
<script>
let vm=new Vue({
el:"#app",
data:{
message:"hello wold"
}
})
</script>
</body>
</html>
效果如下:
- 对象语法
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<script src="../js/vue.js"></script>
<title>v-bind</title>
<style>
.box{
background-color: #ff0;
}
.textColor{
color: #0048FF;
}
.textSize{
font-size: 30px;
}
</style>
</head>
<body>
<ul class="box" v-bind:class="{'textColor':isColor, 'textSize':isSize}">
<li>学习Vue</li>
<li>学习Node</li>
<li>学习React</li>
</ul>
<script>
var vm= new Vue({
el:".box",
data:{
isColor:true,
isSize:true
}
})
</script>
</body>
</html>
效果如下:
直接绑定数据里的一个对象
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<script src="../js/vue.js"></script>
<title>v-bind</title>
<style>
.box{
background-color: #ff0;
}
.textColor{
color: #0048FF;
}
.textSize{
font-size: 30px;
}
</style>
</head>
<body>
<ul class="box" :class="classObject">
<li>学习Vue</li>
<li>学习Node</li>
<li>学习React</li>
</ul>
<script>
var vm= new Vue({
el:".box",
data:{
classObject:{
textColor:true,
textSize:false //不渲染,注意看下面的截图
}
}
})
</script>
</body>
</html>
效果如下: