vue学习笔记-动态绑定（v-bind）

v-bind的基本使用

例如可以动态绑定img标签中的src或者是a标签中的href属性中的值
如下：
分别动态绑定了img标签中的src或者是a标签中的href属性中的值

 <div id="app"> 
                <img v-bind:src="imgsrc">
                <a  :href="ahref">百度一下</a>//常用的简便写法
            </div>
       <script>
           var app = new Vue({
               el:'#app',
               data: {
                   content:'人的本质悬置在人的自由当中',
                   imgsrc:'1.jpg',
                   ahref:'http://www.baidu.com'
               }
           }) 
       </script>

v-bind动态绑定class

对象语法

用法说明	实例
通过{ }绑定类+变量名	< span :class="{ backgroundC:isbackground}">Hi< /span>
通过{ }绑定类+布尔值	< span :class="{‘fontS’:true}">Hi< /span>
和普通的类同时存在	< span class=“backgroundC” :class="{ ‘fontS’:true}">Hi< /span>
放在methods或者computed中	< span :class=“getClass()”>Hi

<div id="app"> 
                <!--<h2 :class="{类名:布尔值,类名：布尔值}">当布尔值为true时类名添加到其中</h2>-->
                <span :class="{ backgroundC:false,fontS:true}">{{content}} </span>
                <span :class="{ backgroundC:isbackground,fontS:isfont}">{{content}} </span>//类名：变量名
                <span :class="getClass()">{{content}} </span>//由函数返回
            </div>
       <script>
           var app = new Vue({
               el:'#app',
               data: {
                   content:'人的本质悬置在人的自由当中',
                   imgsrc:'1.jpg',
                   ahref:'http://www.baidu.com',
                   isbackground:true,
                   isfont:false
               },
               methods:{
                    getClass: function() {
                        return { backgroundC:true,fontS:true};
                    }
               }
           }) 
       </script>

数组语法

用法说明	实例
通过[ ]绑定类+变量名	< span :class="[backgroundC:isbackground]">Hi< /span>
通过[ ]绑定类+布尔值	< span :class="[‘fontS’:true]">Hi< /span>
和普通的类同时存在	< span class=“backgroundC” :class="[ ‘fontS’:true]">Hi< /span>
放在methods或者computed中(classes是计算属性)	< span :class=“classes”>Hi

v-for和v-bind结合达到以下效果
实现鼠标点击相应列表颜色即发生变化
代码如下：
css:

html+js

 <div class="tableList">
           <ul>
                <li v-for="(item,index) in movies" :class ="{changeColor: index==liColor }" v-on:click="change(index)"> {{index}}-{{item}} </li>
           </ul>
        </div>
       <script>
           let tableList = new Vue({
               el: '.tableList',
               data: {
                   movies: ['歇菜','寄生虫','魅影缝匠','叔叔','小丑','绅士们','饥饿站台','少年与海'],
                   liColor:-1
               },
              methods:{
                  change: function(index){
                      this.liColor=index;
                  }
              }

           })
          
       </script>

v-bind动态绑定style

对象语法

用法说明	示例
属性名+属性值(值或者变量，值要加引号)	< span :style=" {fontSize:‘15px’ ,backgroundColor:finalColor}">Hi< /span>
函数	< span :style=“getStyle()”>Hi< /span>

<div id="app">  
                <span :style="{fontSizx:'30px',display:'block'}">{{content}} </span>
                <span :style="{fontSize:finalSize, display:finalDisplay}">{{content}} </span>
                <span :style="getStyle()">{{content}} </span>
            </div>
       <script>
           var app = new Vue({
               el:'#app',
               data: {
                   content:'人的本质悬置在人的自由当中',
                   finalSize:'20px',
                   finalDisplay:'inline-block'

               },
               methods:{
                    getStyle: function() {
                        return this.finalSize;
                    }
               }
           }) 
       </script>

数组语法

用法示例	< span :style="[style1,style2 ] ">Hi< /span>

<div id="app">  
            <span :style="[finalSize,finalDisplay]">{{content}} </span>
        </div>
       <script>
           var app = new Vue({
               el:'#app',
               data: {
                   content:'人的本质悬置在人的自由当中',
                   finalSize:{fontSize :'30px'} ,
                   finalDisplay:{display:'inline-block'}

               },
               
           }) 
       </script>