Vue 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语法糖

  <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

对象语法

• 直接通过 {} 绑定一个类
  • 'active' 是想要绑定的类名
  • isActive 是用于判断的布尔值

  <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’

对象语法

  <h2 :style="{color: currentColor, fontSize: fontSize + 'px'}">Hello World</h2>

• style 后面跟的是一个对象类型

• 对象的 key 是 CSS 属性名称

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

• 三目运算符判断

  <h2 :style="{color: isActive ? 'red':'blue'}">Hello World</h2>

数组语法

• style后面跟的是一个数组类型
• 多个值以，分割即可

<div :style="[baseStyles, overridingStyles]"></div>