v-bind 指令
v-bind是处理HTML中的标签属性的，例如<div></div>就是一个标签，<img>也是一个标签，我们绑定<img>上的src进行动态赋值。
html:
<div id="app">
<img v-bind:src="imgSrc" width="200px">
</div>
js:
var app=new Vue({
el:‘#app‘,
data:{
imgSrc:‘http://baidu.com/wp-content/uploads/2017/02/vue01-2.jpg‘ //图片的src地址
}
})
而我们可以使用 : 来简写v-bind
绑定css样式
1.直接绑定class样式
<div :class="className">1.绑定class </div>
2.绑定class并进行判断，在isOK为true时显示样式，在isOk为false时不显示样式。
<div :class="{class:isTrue}">2.绑定class里面的判断</div>
3.绑定class中的数组
<div :class="[classA,classB]">3.绑定class中的数组</div>
4.绑定class中执行的三元运算符
<div :class="isTrue?classA:classB;">4.绑定class中执行的三元运算符</div>
5.绑定style
<div :class="{font:‘微软雅黑‘,color:red">5.绑定style</div>
6.用对象绑定style样式
<div :class="styleObj">用对象绑定style样式</div>
var app = new Vue({
el:"#app",
data:{
styleObj:{
fontSize:"20px",
color:"red"
}
}
)}
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-bind 实例</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>v-bind 实例</h1>
<hr>
<div id="app">
<p> <img v-bind:src="imgSrc" alt="img" width="200px"/> </p>
<p> <a v-bind:href="web_src" target="_blank"> jsPang </a> </p>
<hr>
<div v-bind:class="className">1.绑定class</div>
<div v-bind:class="{classA:isOk}">2.绑定class中的判断</div>
<div v-bind:class="[classA,classB]">3.绑定class中的数组</div>
<div v-bind:class="isOk?classA:classB">4.绑定class中的三元运算符</div>
<hr>
<div>
<input type="checkbox" id="isOk" v-model="isOk">
<label for="isOk"> 改变2的颜色 </label>
</div>
<hr>
<div v-bind:style={color:red,fontSize:font}>5.样式的绑定</div>
<div v-bind:style="styleObj">6.样式的多个绑定</div>
</div>
<style>
.classA {
color: red;
}
.classB {
font-size: 20px;
}
</style>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data:{
imgSrc:‘http://baidu.com/wp-content/uploads/2017/02/vue01-2.jpg‘,
web_src:‘http://baidu.com‘,
className:‘classA‘,
isOk:true,
classA:‘classA‘,
classB:‘classB‘,
red:‘red‘,
font:‘30px‘,
styleObj:{
fontSize:‘60px‘,
color:‘blue‘,
}
}
})
</script>
</body>
</html>
1、直接绑定class样式
|
1 |
<div :class="className">1、绑定classA</div> |
2、绑定classA并进行判断，在isOK为true时显示样式，在isOk为false时不显示样式。
|
1 |
<div :class="{classA:isOk}">2、绑定class中的判断</div> |
3、绑定class中的数组
|
1 |
<div:class="[classA,classB]">3、绑定class中的数组</div> |
4、绑定class中使用三元表达式判断
|
1 |
<div:class="isOk?classA:classB">4、绑定class中的三元表达式判断</div> |
5、绑定style
|
1 |
<div:style="{color:red,fontSize:font}">5、绑定style</div> |
6、用对象绑定style样式
|
1 |
<div:style="styleObject">6、用对象绑定style样式</div> |
原文地址：https://www.cnblogs.com/xiaofandegeng/p/9001642.html
时间： 2024-10-13 22:33:53