Vue-属性绑定&样式绑定

最新推荐文章于 2024-10-09 21:59:43 发布

W5899

最新推荐文章于 2024-10-09 21:59:43 发布

阅读量1.5k

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/W5899/article/details/109085583

版权

属性绑定:

一、Vue如何动态处理属性？

  1.v-bind指令用法
    <a v-bind:href='url'>跳转</a>
  2.缩写形式
    <a :href='url'>跳转</a>

二、v-model的底层实现原理分析

    <input v-bind:value="msg" v-on:input="msg=$event.target.value">
   
   例:  <body>
   <div id="app">
     <div>{{msg}}</div>
     //三个都是一样的
     <input type="text" v-bind:value="msg" v-on:input='handle'>
     <input type="text" v-bind:value="msg" v-on:input='msg=$event.target.value'>
     <input type="text" v-model='msg'>
   </div>
   <script type="text/javascript" src="js/vue.js"></script>
   <script type="text/javascript">
     /*   v-model指令的本质   */
     var vm = new Vue({
       el: '#app',
       data: {
         msg: 'hello'
       },
       methods: {
         handle: function(event){
           // 使用输入域中的最新的数据覆盖原来的数据
           this.msg = event.target.value;
         }
       }
     });
   </script>
 </body>

样式绑定:

一、class样式处理

   1.对象语法:
   (active是class类名，isActive控制样式动态处理，显示隐藏，)
   (如果还需加类的话，只要在isActive后加，例如:{active:isActive,error:idError})即可.
   取反切换可以(this.isActive=! isActive);
      <div v-bind:class="{active:isActive}"></div>

   2.数组语法
    ([activeClass,errorClass]是两个类名)
      <div v-bind:class="[activeClass,errorClass]"></div>

二、样式绑定相关语法细节:

  1.对象绑定和数组绑定可以结合使用
     <div v-bind:class='[activeClass, errorClass, {test: isTest}]'></div>
         data: {  activeClass: 'active',
                  errorClass: 'error',
                  isTest: true,}
              methods: {  handle: function(){
                         this.isTest = false;}
  2.class绑定的值可以简化操作
      <div v-bind:class='arrClasses'></div>
       <div v-bind:class='objClasses'></div>
        data:{ arrClasses: ['active','error'],
              objClasses: {
                active: true,
                error: true
              }
            },
               methods: {
                    handle: function(){
                      this.objClasses.error = false;
                    }
                  }
  3.默认的class如何处理？ 默认的class会保留(结合在一起)
        <div class="base" v-bind:class='objClasses'></div>

三、style样式处理

      1.对象语法
        <div v-bind:style="{color:activeColor,fontSize:fontSize}"></div>
        
    例:   <div v-bind:style='{border: borderStyle, width: widthStyle, height: heightStyle}'></div>
             <div v-bind:style='objStyles'></div>
              data: {
                     borderStyle: '1px solid blue',
                     widthStyle: '100px',
                     heightStyle: '200px',
                     objStyles: {
                       border: '1px solid green',
                       width: '200px',
                       height: '100px'
                     }
                     },
      2.数组语法
        <div v-bind:style="[baseStyle,overridingStyle]"></div>
                           //同样的会覆盖

    例:      <div v-bind:style='[objStyles, overrideStyles]'></div>
         data: {overrideStyles: {
                   border: '5px solid orange',
                   backgroundColor: 'blue'
                 }
                 }，