vue学习资料二（类和样式的绑定）

2017-02-16 本文已影响33人九泰修行

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>