Vue v-bind

Posted 2020-11-26 landuo629

v-bind

v-bind的作用

• 作用：动态绑定属性
• 缩写：语法糖(:)
• 预期：any (with argument) | Object (without argument)
• 参数：attrOrProp (optional)

v-bind基础

• v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值

• 比如通过Vue实例中的data绑定元素的src和href，代码如下：

<div id="app">
  <img v-bind:src="imgSrc" alt="">
  <a v-bind:href="link">Vuejs官网</a>
</div>

<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
        imgSrc: 'https://cn.vuejs.org/images/logo.png',
      link: 'https://cn.vuejs.org/'
    }
  })
</script>

v-bind语法糖

v-bind有一个对应的语法糖，也就是简写方式

  <img v-bind:src="imgSrc" alt="">
  <a v-bind:href="link">Vuejs官网</a>
  <!-- 语法糖 -->
  <img :src="imgSrc" alt="">
  <a :href="link">Vuejs官网</a>

v-bind绑定class

绑定class有两种方式：

对象语法

• 用法一：直接通过{}绑定一个类
  <h2 :class="{‘active‘: isActive}">Hello World</h2>

• 用法二：也可以通过判断，传入多个值
  <h2 :class="{‘active‘: isActive, ‘line‘: isLine}">Hello World</h2>

• 用法三：和普通的类同时存在，并不冲突
  注：如果isActive和isLine都为true，那么会有title/active/line三个类
  <h2 class="title" :class="{‘active‘: isActive, ‘line‘: isLine}">Hello World</h2>

• 用法四：如果过于复杂，可以放在一个methods或者computed中
  注：classes是一个计算属性
  <h2 class="title" :class="classes">Hello World</h2>

数组语法

• 用法一：直接通过{}绑定一个类
  <h2 :class="[‘active‘]">Hello World</h2>

• 用法二：也可以传入多个值
  <h2 :class=“[‘active’, ‘line‘]">Hello World</h2>

• 用法三：和普通的类同时存在，并不冲突
  注：会有title/active/line三个类
  <h2 class="title" :class=“[‘active’, ‘line‘]">Hello World</h2>

• 用法四：如果过于复杂，可以放在一个methods或者computed中
  注：classes是一个计算属性
  <h2 class="title" :class="classes">Hello World</h2>

v-bind绑定style

利用v-bind:style来绑定一些CSS内联样式。

• 在写CSS属性名的时候，比如font-size
• 我们可以使用驼峰式 (camelCase) fontSize
• 或短横线分隔 (kebab-case，记得用单引号括起来) ‘font-size’

绑定class有两种方式：

对象语法

:style="{color: currentColor, fontSize: fontSize + ‘px‘}"
style后面跟的是一个对象类型

• 对象的key是CSS属性名称
• 对象的value是具体赋的值，值可以来自于data中的属性

数组语法

style后面跟的是一个数组类型

• 多个值以，分割即可
  <div v-bind:style="[baseStyles, overridingStyles]"></div>