2020-11-11 Vue-03动态绑定属性

最新推荐文章于 2024-05-22 11:27:38 发布

coderLcy

最新推荐文章于 2024-05-22 11:27:38 发布

阅读量157

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_44805237/article/details/109632879

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

14-v-bind

<body>
  <div id="app">
    <h2>Mamba :{{name}}</h2>
    <img v-bind:src="imgURL" alt="">
    <a v-bind:href="aHref" alt="">百度一下</a>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        name: 'Kobe Bryant',
        imgURL:'https://bkimg.cdn.bcebos.com/pic/83025aafa40f4bfb4f019c66044f78f0f736182a?x-bce-process=image/resize,m_lfit,w_480,limit_1',
        aHref: 'http://www.baidu.com'
      }
    })
  </script>
</body>

15-v-bind动态绑定class（对象语法）

  <style>
    .active{
      color: #f40;
    }
    .line{
      font-size: xx-large;
    }
  </style>

<body>
  <div id="app">
    <h2 class='title' v-bind:class="{active: isActive, line: isLine}">{{name}}</h2>
    <button v-on:click="btnClick">按钮</button>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        name: 'Kobe Bryant',
        isActive: true,
        isLine: true
      },
      methods: {
        btnClick: function(){
          this.isActive = !this.isActive;
          this.isLine = !this.isLine;
        }
      }
    })
  </script>
</body>

16-v-bind动态绑定class（数组语法）- 用的少

用法四methods示例：

<body>
  <div id="app">
    <!-- <h2 class='title' v-bind:class="{active: isActive, line: isLine}">{{name}}</h2> -->
    <h2 class='title' :class="getClasses()">{{name}}</h2>
    <button v-on:click="btnClick">按钮</button>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        name: 'Kobe Bryant',
        isActive: true,
        isLine: true
      },
      methods: {
        btnClick: function(){
          this.isActive = !this.isActive;
          this.isLine = !this.isLine;
        },
        getClasses: function(){
          return {active: this.isActive, line: this.isLine}
        }
      }
    })
  </script>
</body>

<body>
  <div id="app">
    <h2 class='title' :class="['active', 'line']">{{name}}</h2>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        name: 'Kobe Bryant',
      }
    })
  </script>
</body>

作业：

18-19-v-bind动态绑定style

<body>
  <div id="app">
    <h2 :style="{fontSize: finalSize + 'px', color: finalColor}">{{name}}</h2>
    <h2 :style="getStyles()">{{name}}</h2>  // 如果觉得上面太长的话，可以这样绑定
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        name: 'Kobe Bryant',
        finalSize: 100,
        finalColor: 'red'
      },
      methods: {
        getStyles: function(){
          return {fontSize: this.finalSize + 'px', color: this.finalColor}
        }
      }
    })
  </script>
</body>

数组

<body>
  <div id="app">
    <h2 :style="[baseStyle, baseStyle1]">{{name}}</h2>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        name: 'Kobe Bryant',
        baseStyle: {color: 'red'},
        baseStyle1: {fontSize: '100px'}
      },
    })
  </script>
</body>