跟着技术胖学Vue2.0—第七课：v-bind指令

课程回顾

课程主要内容

1、理解v-bind的用法

2、掌握绑定class

3、掌握绑定class中的判断

4、掌握绑定class中的数组

5、掌握绑定class中的三元运算符

6、掌握绑定style

操作步骤

1、理解v-bind的用法

v-bind是用于绑定标签属性的，例如img标签里的src，a标签里的href等等。首先用这两个例子来简单地熟悉一下v-bind指令的用法。

代码：

<div id = 'app'>
        <p><img v-bind:src="imgSrc"></p>
        <p><a :href="webUrl" target="_blank">旅行荚</a></p>
    </div>

data:{
                imgSrc:'https://tripnoter.cn/static/index/icon/home/shili/p7.jpg',
                webUrl:'https://tripnoter.cn'
            }

上述代码有两个注意点：一是v-bind可以缩写为:，标签p中和a中的两种绑定写法是等价的；二是a标签中的target=_blank可以实现在新标签中打开页面。

效果：

当点击“旅行荚”时， 会在新的标签页里打开该网站，如下： 

2、掌握绑定class

代码：

<div :class='className'>2、绑定class</div>

<style>
        .classA{
            color:red;
        }
    </style>

 data:{
                className:'classA'
            }

效果：

 3、掌握绑定class中的判断

实现功能：在div的class中给一个判断，如果为true就执行该class的效果，如果为false就不执行该class的效果。并且增加一个多选框用于联动判断，当选中时为true，改变样式；否则为false，不改变样式。

代码：

<div :class='{classA:isOK}'>3、绑定class中的判断</div>
<p>
            <input type="checkbox" id="isOK" v-model='isOK'>
            <label for="isOK">isOK={{isOK}}</label>
        </p>

    <style>
        .classA{
            color:red;
        }
    </style>

data:{
                isOK:true
            }

效果：

         

上面的代码我在写的时候其实有一个小问题，等会儿后面一起写了再说。

4、掌握绑定class中的数组

实现功能：绑定两个class，将其放在数组中同时显示。

代码：

<div :class='[classA,classB]'>4、绑定class中的数组</div>

<style>
        .classA{
            color:red;
        }
        .classB{
            font-size:150%;
        }
    </style>

data:{
                classA:'classA',
                classB:'classB'
            }

效果：

问题来了，刚刚在上一个绑定class中的判断中我有说到自己遇到过小问题，和这里的代码对比来看，就是当绑定class数组时，需要在data中声明这些class名字，否则样式不会生效。但是刚刚的绑定class判断中的classA就没有在data中声明，一样生效了，所以我很疑惑，这是为啥嘞？有人知道的话麻烦告诉我一声吧。

5、掌握绑定class中的三元运算符

实现功能：判断，如果为true，则显示classA的样式，如果为false，则显示classB的样式。

代码：

<div :class='isOK?classA:classB'>5、绑定class中的三元运算符</div>

<style>
        .classA{
            color:red;
        }
        .classB{
            font-size:150%;
        }
    </style>

   data:{
                isOK:false,
                classA:'classA',
                classB:'classB'
            }

效果：

 因为isOK是false，所以显示的是classB的样式。这里也要注意，如果不在data中注册classA和classB，也一样无法显示效果。

6、掌握绑定style

实现功能：直接绑定style的样式，以及使用style对象来绑定。

首先是直接绑定style样式。

代码：

<div :style='{color:orange,fontSize:font}'>6、绑定style</div>

data:{
                orange:'orange',
                font:'25px'
            }

效果：

也可以使用style对象来绑定。

代码：

<div :style='styleObject'>6、对象绑定style</div>

data:{
                styleObject:{
                    fontSize:'50px',
                    color:'green'
                }
            }

效果：

上述代码有两个要注意的地方：一是style中，font-size写为了fontSize，这是因为在vue中不支持-的写法，所以要改写为小驼峰命名；二是style中的属性一定要在data中声明。 

---

今天的学习到此结束啦！