vue笔记（四）

8.Vue动态绑定属性

8.1 v-bind基础使用

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

2. 语法糖：：

   <script src="../js/vue.js"></script>
   
   <div id="app"><!--显示声明-->
       <!--普通语法-->
       <a v-bind:href="aHerf">百度一下</a>
       <img v-bind:src="Imghe" alt="">
       <!--语法糖-->
       <a :href="aHerf">百度一下</a>
       <img :src="Imghe" alt="">
   </div>
   <script>
       const app =new Vue({
           el:'#app',//用于挂载有管理的元素
           data:{//定义数据
              aHerf:'http://www.baidu.com',         Imghe:'https://img.alicdn.com/imgextra/i2/987070082/O1CN01cmsZ6C1CTb8jDLaWf_!!0-saturn_solar.jpg_468x468q75.jpg_.webp'
           }
       })
   </script>
   

8.2 v-bind 动态绑定class

1. 绑定对象语句

   <!--用法一：直接通过{}绑定一个类-->
   <h2 :class="{'active': isActive}">Hello World</h2>
   <!--用法二：也可以通过判断，传入多个值-->
   <h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>
   <!--用法三：和普通的类同时存在，并不冲突
   注：如果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>
   

   <style>
       .active{
       color:red;
       }
   </style>
   <script src="../js/vue.js"></script>
   <div id="app"><!--显示声明-->
      	<!-- <h1 v-bind:class="active">{{message}}</h1> 无意义-->
    	<!--<h1 v-bind:class="{key1: boolean, key2: boolean} {}内存放对象">{{message}</h1>-->
       <!--关键-->
       <h1 class="title" :class="{active: isactive ,line: isline}">{{message}}		</h1>
       <!--两个class合并 isactive,isline对应data-->
       <button v-on:click="once">按钮</button>
   </div>
   <script>
       const app =new Vue({
           el:'#app',//用于挂载有管理的元素
           data:{//定义数据
               message:'你好',//声明变量
               isactive: true,
               isline:true
           },
           methods:{
               once:function (){
                   this.isactive = !this.isactive
                   //当前isactive不等于true及是false就可以不使用.active
               }
           }
       })
   </script>
   

2. 绑定数组语句

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

   <style>
       .active{
           color:red;
       }
   </style>
   <script src="../js/vue.js"></script>
       <div id="app"><!--显示声明-->
           <!--[数组] 两个语句一样-->
           <h1 class="title" :class="['active','line']">{{message}}</h1>
           <h1 class="title active line">{{message}}</h1>
           <!--当active与line是变量时,数据库传过来的数据 ''字符串解析-->
           <h1 :class="[active,line]">{{message}}</h1>
       </div>
   
   <script>
       const app =new Vue({
           el:'#app',//用于挂载有管理的元素
           data:{//定义数据
               message:'你好',//声明变量
               active:'aaaa',
               line:'bbb'
           }
       })
   </script>
   

8.3 v-bind 动态绑定style

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

1. 数值语法绑定

   <script src="../js/vue.js"></script>
   <div id="app"><!--显示声明-->
   <!--<h2 :style="{key(属性名): value(属性值)不加''否者解析的是字符,值可以来自于data中的属性}">{{message}}</h2>-->
       <!--方法1-->
       <h2 :style="{fontSize:line+'px',bgColor:color}">{{message}}</h2>
       <!--方法2-->
       <h2 :style="getStyle()">{{message}}</h2>
   </div>
   <script>
       const app =new Vue({
           el:'#app',//用于挂载有管理的元素
           data:{//定义数据
               message:'你好', //声明变量
               line:100,
               color:'red'
           },
           methods:{
               getStyle:function (){
                 return {fontSize:this.line+'px',bgColor:this.color}
               }
           }
       })
   </script>
   

2. 数组语法绑定

   • style后面跟的是一个数组类型，多个值以，分割即可

   <div v-bind:style="[baseStyles, overridingStyles]"></div>
   

       <script src="../js/vue.js"></script>
       <div id="app"><!--显示声明-->
       <h1 :style="[fontSize,bgColor]">{{message}}</h1>
       </div>
       <script>
           const app =new Vue({
               el:'#app',//用于挂载有管理的元素
               data:{//定义数据
                   message:'你好',//声明变量
                   fontSize:{fontSize: '120px'},
                   bgColor:{bgColor: 'red'}
               }
           })
       </script>