【VUE实战】学习笔记（三）

原创于 2019-06-12 23:49:26 发布 · 175 阅读

0 ·

CC 4.0 BY-SA版权

vue技术栈专栏收录该内容

4 篇文章

订阅专栏

本文深入讲解了Vue.js中v-bind指令的使用方法，包括如何动态更新HTML属性，绑定class和计算属性的方式。通过实例展示了受控class的绑定，以及如何在数据变化时重新渲染页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

v-bind指令：
作用：用于动态更新HTML上的属性，当数据变化时，就会重新渲染。
缩写:v-bind:class=“xxxx” 等于:class=“xxxx”
绑定class的几种方式：

受控方式


  <div class="container" :class="{'red':isRed ,’ error ’:isError}">
    <a v-bind:href="url">点击跳转</a>
    <button @click="switchClassHandler">切换class</button>
  </div>
...

  data: () => {
    return {
        url:"http://www.baidu.com",
        isRed:false，
        isError：false
    };
  },

可以看出:

'red’是否起作用是受控于isRed属性的值。
第二个值得注意的地方是，class和:class是可以共存的。
class中可以放入多个受控class.:class="{'red':isRed ,’ error ’:isError}"。
绑定计算属性,注意冒号后方为true时前方class才会生效：

<div class="box" :class="classes"></div>
...

  computed: {
    classes: function() {
      return {
        green: this.isRed
      };
    }
  }