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>
