Vue之v-bind快速学习

最新推荐文章于 2024-07-05 11:27:33 发布

要开心啊

最新推荐文章于 2024-07-05 11:27:33 发布

阅读量7.5k

点赞数 5

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/sabstarb/article/details/105722752

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

  <div id="app">
    <!--普通写法-->
    <img v-bind:src="message" alt="" srcset="">
    <a v-bind:href="url">百度一下</a>
    <br/>
    <!--语法糖（简写标签）写法-->
    <img :src="message" alt="" srcset="">
    <a :href="url">百度一下</a>
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'https://i1.hdslb.com/bfs/face/c850c18ae6b507d0ef34837f53a51090b6a7451f.jpg@68w_68h.webp',
        url: 'https://www.baidu.com'
      },
      methods: {}
    });

2、v-bind动态绑定class（对象）

通过v-bind可以动态设置class的增加和删除，更加的灵活，不会要向jquery那样先获取DOM在进行增加或删除class。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>第七次</title>
  <script src="../js/vue.js"></script>
  <style>
    .active{
      color: red;
    }

  </style>
</head>

<body>

  <div id="app">
      <!--第一个class没有使用动态绑定，则不能直接删除，两个class会合并处理-->
    <h2 class="NotChange" :class="{active:  isActive,line: isLine}">{{message}}</h2>
    <button @click="changeColor">点击变色</button>
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'hello World!',
        isActive: true,
        isLine: true
      },
      methods: {
        changeColor:  function(){
          this.isActive = !this.isActive;
        }
      }
    });
  </script>
</body>

</html>

在这里插入图片描述

还可以在methods内使用getClasses返回。

  <div id="app">
    <!-- <h2 class="NotChange" :class="{active:  isActive,line: isLine}">{{message}}</h2> -->
    <h2 class="NotChange" :class="getClasses()">{{message}}</h2>
    <button @click="changeColor">点击变色</button>
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'hello World!',
        isActive: true,
        isLine: true
      },
      methods: {
        changeColor:  function(){
          this.isActive = !this.isActive;
        },getClasses: function(){
          return {active:  this.isActive,line: this.isLine};
        }
      }
    });
  </script>

在这里插入图片描述

3、v-bind动态绑定class（数组）

使用[类名A，类名B]传入多个类名。
使用[‘字符串A’，‘字符串B’]传入多个字符串。
在methods内使用getClasses()返回上述两种。

 <div id="app">
    <h2 class="NotChange" :class="['active','line']">{{message}}</h2>
    <h2 class="NotChange" :class="[isActive,isLine]">{{message}}</h2>
    <h2 class="NotChange" :class="getClasses()">{{message}}</h2>
    <button @click="changeColor">点击变色</button>
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'hello World!',
        isActive: 'active',
        isLine: 'line'
      },
      methods: {
        changeColor:  function(){
          this.isActive = !this.isActive;
        },getClasses: function(){
          return [this.isActive,this.isLine];
        }
      }
    });
  </script>

在这里插入图片描述

4、v-bind动态绑定style（对象）

使用方式为{key(属性名),value(值)}
key可以使用驼峰命名法(font-size==>fontSize)，不使用则需要加上单引号，否则 - 会转义。
可以将动态style抽离，使用一个方法返回。

   <div id="app">
      <!-- <h2 :style="{fontSize:finalSize,color:finalColor}">{{message}}</h2> -->
      <h2 :style="{fontSize:finalSize + 'px',color:finalColor}">{{message}}</h2>
      <h2 :style="{'font-size':finalSize + 'px',color:finalColor}">{{message}}</h2>
      <h2 :style="getStyle()">{{message}}</h2>
    </div>
  
    <script>
      let vm = new Vue({
        el: '#app',
        data: {
          message:  '你好世界！',
          // finalSize:'50px',
          finalSize:50,
          finalColor:'yellow',
        },
        methods: {
          getStyle:function(){
            return {'font-size':this.finalSize + 'px',color:this.finalColor};
          }
        }
      });
    </script>

在这里插入图片描述

5、v-bind动态绑定style（数组）

多个对象的集合

    <div id="app">
      <h2 :style="[style1,style2]">{{message}}</h2>
    </div>
  
    <script>
      let vm = new Vue({
        el: '#app',
        data: {
          message:  '你好',
          style1:{fontSize:'40px'},
          style2:{backgroundColor:'green'}
        },
        methods: {}
      });
    </script>