v-bind

注意：加了”“是字符串；不加就是变量，要当成对象来看待（数组、函数、对象）

v-bind:可以动态的为属性绑定值，加了属性绑定指令后，属性的值可以是动态的，如果不加则就是普通的字符串或值

主要用于响应式的更新html属性

动态绑定的属性： 图片的链接(src)、网站的链接(href)、动态绑定一些类(class)、样式(style)等等

比如通过Vue实例中的data绑定元素的src和href，代码如下

 <div id="app">
     <!-- 当然也可以通过语法糖“:”缩写v-bind -->
     <a v-bind:href="link">Vuejs官网</a>
     <img v-bind:src="logoUrl" alt=""/>
     <img :src="logoUrl" alt=""/> 
 </div>
 <script src="/vue.js"></script>
 <script>
     let app = new Vue({
        el:"#app",
        data:{
             logoUrl:"http://vuejs.org/images/logo.png",
             link:"https://vuejs.org"
         }
     })
 </script>

绑定class

很多时候，我们希望动态的来切换class，比如：

当数据为某个状态时，字体显示红色。
当数据为另一个状态时，字体显示黑色。

绑定class有两种方式：

对象语法：

对象语法的含义是:class后面跟一个对象。

对象语法有下面这些用法：

 //用法一：直接通过{}绑定一个类
 <h2 :class="{active:isActive}">Hello world</h2>
 
 //用法二：也可以通过判断，传入多个值
 <h2 :class="{active:isActive,line:isLine}">Hello world</2>  
 
 //用法三：和普通的类同时存在，并不冲突
 //注：如果isActive和IsLine都为true，那么会有title/active/line三个类
 <h2 class="title" :class="{active:isActive,line:isLine}">Hello world</h2>
 
 //用法四：如果过于复杂，可以放在一个methods或者computed中
 //注：classes是一个计算属性
 <h2 class="title" :class="classes">Hello world</h2>

Demo:点击按钮切换字体颜色

 <div id="app">
   <h1 v-bind:class="{active:isActive}">{{message}}</h1>
   <button v-on:click="buttonClick()">颜色切换</button>
 </div>
 
 <script>
   const vue = new Vue({
     el: '#app',
     data: {
       message: 'hello world',
       isActive:true
     },
     methods:{
       buttonClick:function(){
         this.isActive = !this.isActive;
       }
     }
   })
 </script>
 
 <style>
     .active{
         color:red;
     }    
 </style

数组语法：

数组语法的含义是:class后跟的是一个数组。

数组语法有下面这些用法（数组语法一般用的比较少）：

 //用法一：直接通过[]绑定一个类
 class="[active]">Hello world
 
 //用法二：也可以传入多个值
 class="[active,line]">Hello world
 
 //用法三：和普通的类同时存在，并不冲突
 //注：会有title/active/line三个类
 class="title" :class="[active,line]">Hello world
 
 //用法四：如果过于复杂，可以放在一个methods或者computed中
 //注：classes是一个计算属性
 class="title":class="classes">Hello world

Demo：

 <style>
 .active{
   color: red;
 }
 
 .line{
   font-size: 50px;
 }
 
 .common{
   color:green;
 }
 </style>
 
 <div id="app">
     <!-- 如果加了单引号用的就是style中的指定class，如果没有单引号用的就是vue对象中的active变量 -->
     <!-- 注：这里，下面三个类将共存-->
     <h2 class="common" :class="['active',line]">Hello world</h2>
 </div>
 
 <script>
 const vue = new Vue({
   el: '#app',
   data: {
     line:'line'
   }
 })
 
 </script>

绑定style

我们可以利用v-bind:style来绑定一些CSS内联样式

在写CSS属性名的时候，比如font-size

我们可以使用驼峰式(cameCase)：fontSize
或短横线分隔(kebab-case，记得用单引号括起来)'font-size'

绑定class有两种方式：

对象语法
数组语法

对象语法的含义就是style后面跟的是一个对象类型

 <!-- 对象key是CSS属性名称 -->
 <!-- 对象value是具体赋的值，值可以来自于data中的属性 -->
 :style="{coloc:currentColor,fontsize:fontsize+'px'}"

数组语法的含义就是style后面跟的是一个数组类型

 <!-- 多个值以，分割即可-->
 <div v-bind:style="[baseStyles,overridingStyles]"></div>

Demo：

 <div id="app">
     <!-- 通过对象绑定style行内样式，值如果为字符串，那么将直接显示样式值 -->
     <h1 :style="{color:'red'}">{{message}}</h1>
 
     <!-- 通过变量来绑定行内样式表 -->
     <h1 :style="{color:color}">{{message}}</h1>
 
     <!-- 通过方法来绑定样式 -->
     <h1 :style="getStyle()">{{message}}</h1>
 
     <!-- 通过数组来绑定样式 -->
     <h1 :style="[common,bgColor]">{{message}}</h1>
 </div>
 
 <script type="text/javascript">
     const vue = new Vue({
         el: "#app",
         data: {
             message: "hello world",
             color: 'red',
             common: { color: 'blue', fontSize: '10px' },
             bgColor: { backgroundColor: 'black' }
         },
         methods: {
             getStyle: function () {
                 return {
                     color: this.color
                 };
             }
         }
     })
 </script>

注意事项

不能在属性值内直接写入以下语法

 <h1 :style="font-size:50px;color:red;">this is test</h1>

这是错误的，因为vue会把font-size当成一个data数据！

解决方式如下：

 <h1 :style="'font-size:50px;color:red;'">this is test</h1>

可以看到只需要在总的样式前后各加上一个 ’ 单引号即可！这样他就会把他当作字符串了，不过如果我们这么加样式就没有必要写v-bind

vue中v-model和v-bind区别