VUE
类的绑定方式一：对象绑定方式
语法：
v-bind:class="{className:isShow}"
className依然在style中设置，isShow映射在data中，名称自定义，值为true则加上这个类，如果为false则不加上这个类；
举例：
<style>
.red{
color:red;
}
.bg-green{
background-color: green;
}
</style>
<div id="app">
<span v-bind:class="{red:color,'bg-green':bgColor}">{{value}}</span>
</div>
<script src="vue.js"></script>
<script>
var demo = new Vue({
el:"#app",
data:{
value:'共享单车呼唤公管',
color:true,
bgColor:false
}
})
</script>
这个例子可以看到color的值为true，所以文字被渲染成了红色，而bgColor的值为false，所以在页面中没有看到这个类bg-green;
类的绑定方式二：数组绑定方式
- 数组绑定，这样能让后端传递更多的值；
- 语法：
v-bind:class="[color,bg]"
数组每个值映射data的属性名称，data的属性的值就是style的class名；
举例：
<style>
.green{
color:green;
}
.blue{
background-color:blue;
}
</style>
<div id="app">
<span v-bind:class="[color,bfColor]">{{value}}</span>
</div>
<script>
var demo = new Vue({
el:"#app",
data:{
color:"green",
bfColor:"blue",
value:"中国"
}
})
</script>
- 注意data每个属性的值只能传递一个类；
鼠标事件小例子
当鼠标进入一个盒子，显示另一个盒子，当鼠标离开，另一个盒子隐藏；
例子：
<div id="app">
<span >博客</span>
<ul v-bind:class="[isShow]">
<li>博客评论</li>
<li>未读提醒</li>
</ul>
</div>
<style>
div{
width: 150px;
}
span{
padding:20px;
background:#efefef;
}
ul{
padding:0;
display: none;
}
li{
padding: 10px;
border: 1px solid orange;
list-style: none;
}
.show{
display: block;
}
</style>
<script>
var demo = new Vue({
el:"#app",
data:{
isShow:''
}
})
document.getElementById('app').onmouseover = function(){
demo.isShow = 'show'
}
document.getElementById('app').onmouseleave = function(){
demo.isShow = ''
}
</script>
- 这里我们使用了类的绑定方式二，数组绑定一个isShow，映射到data的isShow，第一次插值为空，当操作dom事件让isShow为我们定义好的.show;
样式的绑定方式一：对象绑定方式
同类的对象绑定方式一样,但有些不同
- 语法
v-bind:style="{key:value}"
举例：
<div id="app">
<span v-bind:style="{color:color}">{{value}}</span>
</div>
<script src="vue.js"></script>
<script>
var demo = new Vue({
el:"#app",
data:{
color:"green",
value:"瑞源先生早上好！"
}
})
</script>
绑定多个：
<div id="app">
<span v-bind:style="{color:color,background:bgColor,fontSize:f24}">{{value}}</span>
</div>
<script src="vue.js"></script>
<script>
var demo = new Vue({
el:"#app",
data:{
color:"green",
bgColor:"red",
f24:"24px",
value:"瑞源先生早上好！"
}
})
</script>
- 可以看到和类的绑定有明显不同的地方就是，v-绑定的对象里面，
- key是样式中的key值，这个和类的对象绑定不同，类的对象绑定的key是className；
- value映射data中的key值，这个和类的对象绑定一样；
- data中的value值就是样式的value值，而类的对象绑定是布尔值；
样式的绑定方式二：数组绑定方式
语法大致一样，不过在data中不一样
语法：
v-bind:style="[style1,style2]"
举例：
<div id="app">
<span v-bind:style="[font,size]">{{value}}</span>
</div>
<script src="vue.js"></script>
<script>
var demo = new Vue({
el:"#app",
data:{
font:{
color:'blue ',
fontSize:'20px'
},
size:{
display:'block',
height:'100px',
width:'500px',
background:"yellowgreen"
},
value:'瑞源先生早上好！'
}
})
</script>
从上面可以看到数组中font和size映射data中的key值，data中key的value是一个对象，里面的键值对来设置style样式；而类的数组绑定方式中，data中的value值是css样式表里面的className，是一个字符串，且不能多个，不能有空格;
以上针对类和样式的对象和数组绑定方式务必熟悉，切莫混淆；
小练习
由于还没有学习到事件方法，就用原生的事件绑定来完成以下练习：
类似于淘宝页面选择鞋子商品的颜色，然后会弹出尺码供选择的一个交互效果；
主要是练习上述的类和样式的绑定；
<style>
#app{
width:500px;
margin:50px auto;
font-size: 12px;
}
#app div{
height:30px;
line-height: 30px;
margin-bottom: 10px;
padding:5px;
}
strong{
color:#333;
font-weight: normal;
}
span{
color:#666;
padding: 5px;
border:1px dashed #ccc;
}
#size{
}
.has-click{
background-color:#F9E1E5;
border:1px solid orange;
}
.choose{
border:1px solid red;
}
</style>
<div id="app">
<div id="btns">
<strong>颜色</strong>
<span v-bind:class="{choose:btn[0]}" class="btn">粉色</span>
<span v-bind:class="{choose:btn[1]}" class="btn">橘色</span>
<span v-bind:class="{choose:btn[2]}" class="btn">咖啡色</span>
<span v-bind:class="{choose:btn[3]}" class="btn">深蓝色</span>
</div>
<div id="size" class="{{hasClick}}">
<strong>选择尺码</strong>
<span v-bind:style="{border:bd[0]}" class="size-item">280</span>
<span v-bind:style="{border:bd[1]}" class="size-item">260</span>
<span v-bind:style="{border:bd[2]}" class="size-item">270</span>
<span v-bind:style="{border:bd[3]}" class="size-item">290</span>
</div>
</div>
<script>
var demo = new Vue({
el:"#app",
data:{//我们可以把value放到数组里面
btn:[false,false,false,true],
hasClick:'',
bd:["1px solid #ccc",,,"1px solid #ccc"]
}
})
var btn = document.getElementById('btns').getElementsByTagName('span');
btn[0].onclick =function(){
demo.btn = [];
demo.btn[0] = true;
demo.hasClick = 'has-click';
demo.bd = [];
demo.bd[1] = '1px solid #ccc';
demo.bd[2] = '1px solid #ccc';
}
btn[1].onclick =function(){
demo.btn = [];
demo.btn[1] = true;
demo.bd = [];
demo.hasClick = 'has-click';
demo.bd[0] = '1px solid #ccc';
demo.bd[3] = '1px solid #ccc';
}
btn[2].onclick =function(){
demo.btn = [];
demo.btn[2] = true;
demo.bd = [];
demo.hasClick = 'has-click';
demo.bd[1] = '1px solid #ccc';
demo.bd[2] = '1px solid #ccc';
}
btn[3].onclick =function(){
demo.btn = [];
demo.btn[3] = true;
demo.bd = [];
demo.hasClick = 'has-click'
demo.bd[0] = '1px solid #ccc';
demo.bd[2] = '1px solid #ccc';
}
</script>
