绑定对象

• 我们可以给v-bind:class 一个对象，以动态地切换class。
• 注意：v-bind:class指令可以与普通的class特性共存
• [AppleScript] 纯文本查看 复制代码

  1、 v-bind 中支持绑定一个对象 
  	如果绑定的是一个对象 则 键为 对应的类名  值 为对应data中的数据 
  <!-- 
  	HTML最终渲染为 <ul class="box textColor textSize"></ul>
  	注意：
  		textColor，textSize  对应的渲染到页面上的CSS类名	
  		isColor，isSize  对应vue data中的数据  如果为true 则对应的类名 渲染到页面上 
  
  
  		当 isColor 和 isSize 变化时，class列表将相应的更新，
  		例如，将isSize改成false，
  		class列表将变为 <ul class="box textColor"></ul>
  -->
  
  <ul class="box" v-bind:class="{textColor:isColor, textSize:isSize}">
      <li>学习Vue</li>
      <li>学习Node</li>
      <li>学习React</li>
  </ul>
    <div v-bind:style="{color:activeColor,fontSize:activeSize}">对象语法</div>
  
  <sript>
  var vm= new Vue({
      el:'.box',
      data:{
          isColor:true,
          isSize:true，
      	activeColor:"red",
          activeSize:"25px",
      }
  })
  </sript>
  <style>
  
      .box{
          border:1px dashed #f0f;
      }
      .textColor{
          color:#f00;
          background-color:#eef;
      }
      .textSize{
          font-size:30px;
          font-weight:bold;
      }
  </style>

• 绑定class
• [AppleScript] 纯文本查看 复制代码

  2、  v-bind 中支持绑定一个数组    数组中classA和 classB 对应为data中的数据
  
  这里的classA  对用data 中的  classA
  这里的classB  对用data 中的  classB
  <ul class="box" :class="[classA, classB]">
      <li>学习Vue</li>
      <li>学习Node</li>
      <li>学习React</li>
  </ul>
  <script>
  var vm= new Vue({
      el:'.box',
      data:{
          classA:‘textColor‘,
          classB:‘textSize‘
      }
  })
  </script>
  <style>
      .box{
          border:1px dashed #f0f;
      }
      .textColor{
          color:#f00;
          background-color:#eef;
      }
      .textSize{
          font-size:30px;
          font-weight:bold;
      }
  </style>

  
  
• 绑定对象和绑定数组 的区别
  • 绑定对象的时候 对象的属性 即要渲染的类名 对象的属性值对应的是 data 中的数据
  • 绑定数组的时候数组里面存的是data 中的数据
    
    
  
  
  

绑定对象

• 我们可以给v-bind:class 一个对象，以动态地切换class。
• 注意：v-bind:class指令可以与普通的class特性共存
• [AppleScript] 纯文本查看 复制代码

  1、 v-bind 中支持绑定一个对象 
  	如果绑定的是一个对象 则 键为 对应的类名  值 为对应data中的数据 
  <!-- 
  	HTML最终渲染为 <ul class="box textColor textSize"></ul>
  	注意：
  		textColor，textSize  对应的渲染到页面上的CSS类名	
  		isColor，isSize  对应vue data中的数据  如果为true 则对应的类名 渲染到页面上 
  
  
  		当 isColor 和 isSize 变化时，class列表将相应的更新，
  		例如，将isSize改成false，
  		class列表将变为 <ul class="box textColor"></ul>
  -->
  
  <ul class="box" v-bind:class="{textColor:isColor, textSize:isSize}">
      <li>学习Vue</li>
      <li>学习Node</li>
      <li>学习React</li>
  </ul>
    <div v-bind:style="{color:activeColor,fontSize:activeSize}">对象语法</div>
  
  <sript>
  var vm= new Vue({
      el:'.box',
      data:{
          isColor:true,
          isSize:true，
      	activeColor:"red",
          activeSize:"25px",
      }
  })
  </sript>
  <style>
  
      .box{
          border:1px dashed #f0f;
      }
      .textColor{
          color:#f00;
          background-color:#eef;
      }
      .textSize{
          font-size:30px;
          font-weight:bold;
      }
  </style>

• 绑定class
• [AppleScript] 纯文本查看 复制代码

  2、  v-bind 中支持绑定一个数组    数组中classA和 classB 对应为data中的数据
  
  这里的classA  对用data 中的  classA
  这里的classB  对用data 中的  classB
  <ul class="box" :class="[classA, classB]">
      <li>学习Vue</li>
      <li>学习Node</li>
      <li>学习React</li>
  </ul>
  <script>
  var vm= new Vue({
      el:'.box',
      data:{
          classA:‘textColor‘,
          classB:‘textSize‘
      }
  })
  </script>
  <style>
      .box{
          border:1px dashed #f0f;
      }
      .textColor{
          color:#f00;
          background-color:#eef;
      }
      .textSize{
          font-size:30px;
          font-weight:bold;
      }
  </style>

  
  
• 绑定对象和绑定数组 的区别
  • 绑定对象的时候 对象的属性 即要渲染的类名 对象的属性值对应的是 data 中的数据
  • 绑定数组的时候数组里面存的是data 中的数据