今天的码农女孩学习了关于v-bind指令的知识

v-bind指令：用于绑定一个或多个属性值，或者向另一个组件传递props值

        一般是图片的链接src,网站的链接href,动态绑定一些类、样式等等

        作用：动态绑定属性

        缩写：:(只写一个冒号)

     <div id="app">
         <!-- 动态绑定class v-bind:class="{类名1:true,类名2:false}" -->
         <h2 v-bind:class="{active:isActive}">{{message}}</h2>
         <!-- vue会解析v-bind指令，动态给src属性绑定imgURL变量 -->
         <img v-bind:src="imgURL">
         <a v-bind:href="aHref">百度一下</a>
         <!-- 语法糖的写法 -->
         <a :href="aHref">百度一下</a>
     </div>
     <script>
         var app=new Vue({
                el:"#app",
                data:{
                    message:"hello kitty",
                    imgURL:"img/about1.png",
                    aHref:'http://www.baidu.com',
                    isActive:true
                }
            })
     </script>

v-bind绑定类简洁写法：

    <div id="app">
        <!-- 最初写法：写在标签里面 -->
        <h2 v-bind:class="{active:isActive,title:isTitle}">{{message}}</h2>
        <!-- 简洁写法：使用冒号进行缩写，生成一个函数 -->
        <h2 :class="classes()">{{message}}</h2>
        <!-- 点击按钮进行颜色转换 -->
        <button v-on:click="btn">点击</button>
    </div>
    <script>
        var app=new Vue({
               el:"#app",
               data:{
                   message:"hello kitty",
                   isActive:true,//判断是否存在该样式
                   isTitle:true
               },
               methods: {
                   btn:function(){
                       this.isActive=!this.isActive
                       this.isTitle=!this.isTitle
                   },
                   classes:function(){
                       return {active:this.isActive,title:this.isTitle}
                   }
               },
           })
    </script>

css：

    <style>
        .active{
            color:red;
        }
        .title{
            font-style: italic;
        }
    </style>

v-bind绑定style:

利用v-bind:style来绑定一些css内联样式

对象语法：key(属性名)可以是驼峰命名法，也可以用中划线-;

                  value(属性值)如果要是写死大小的话必须加单引号当做字符串，不加会当成变量去解析;fs当成变量使用的时候后面的单位要进行拼接

         也可以将多个key value放进一个函数里，记得属性值加上this

数组语法(不常用)：style后面跟的是一个数组类型，多个值用逗号分割

    <div id="app">
        <!--对象写法：<h2 :style="{key(属性名): value(属性值)}">{{message}}</h2> -->
        <h2 :style="{fontSize:fs+'px',color:fc}">{{message}}</h2>
        <!-- 数组写法:<h2 :style="[变量1，变量2]">{{message}}</h2> -->
        <h2 :style="[fw,bgc]">{{message}}</h2>
    </div>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                message:"hello kitty",
                fs:50,
                fc:"red",
                fw:{fontWeight:700},
                bgc:{backgroundColor:'pink'}
            }
        })
    </script>