vue2.x(指令v-bind)
2019-08-13 本文已影响0人
Artifacts
v-bind 缩写
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
使用v-bind来绑定css样式：
在绑定CSS样式是，绑定的值必须在vue中的data属性中进行声明。
1、直接绑定class样式
<div :class="className">1、绑定classA</div>
2、绑定classA并进行判断，在isOK为true时显示样式，在isOk为false时不显示样式。
<div :class="{classA:isOk}">2、绑定class中的判断</div>
3、绑定class中的数组
<div :class="[classA,classB]">3、绑定class中的数组</div>
4、绑定class中使用三元表达式判断
<div :class="isOk?classA:classB">4、绑定class中的三元表达式判断</div>
5、绑定style
<div :style="{color:red,fontSize:font}">5、绑定style</div>
6、用对象绑定style样式
<div :style="styleObject">6、用对象绑定style样式</div>
var app=new Vue({
el:'#app',
data:{
styleObject:{
fontSize:'24px',
color:'green'
}
}
})
完整代码：
<!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" width="200px"></p>
<p><a :href="webUrl" target="_blank">js</a></p>
<hr>
<div :class="className">1.绑定class</div>
<div :class="{classA:isOk}">2.绑定class中的判断</div>
<div :class="[classA,classB]">3.绑定class中的数据</div>
<div :class="isOk?classA:classB">4.绑定class中的三元运算符</div>
<hr>
<div>
<input type="checkbox" id="isOk" v-model="isOk">
<label for="isOk">isOk={{isOk}}</label>
</div>
<hr>
<div :style="{color:red,fontSize:font}">5.绑定style</div>
<div :style="styleObject">6.对象绑定style</div>
</div>
<p></p>
<style>
.classA{
color: red;
}
.classB{
font-size: 150%;
}
</style>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
message:'hello Vue!',
imgSrc:'http://img2.imgtn.bdimg.com/it/u=4064075977,3738371861&fm=26&gp=0.jpg',
webUrl:'https://hr.qxwz.com/jobs/?zhinengId=1785&page=1&limit=10',
className:'classA',
isOk:false,
classA:'classA',
classA:'classB',
red:'red',
font:'20px',
styleObject:{
color:'green',
fontSize:'22px'
}
}
})
</script>
</body>
</html>
