Vue v-bind的使用

v-bind

-作用：动态绑定属性

-缩写： ：

参数：属性 或 prop

v-bind动态绑定悬浮详情

<template>
  <div>
    <p v-bind:title="message">悬浮鼠标</p>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
  },
  data() {
    return {
      message:'我是悬浮内容'
    }
  }
}
</script>

<style>
  .active {
    background-color: red;
  }
</style>

v-bind动态绑定图片url

<template>
  <div>
    <img v-bind:src="url">
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
  },
  data() {
    return {
      url: 'https://img0.baidu.com/it/u=985192759,2265250910&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333'
    }
  }
}
</script>

<style>
  .active {
    background-color: red;
  }
</style>

v-bind动态绑定css属性（数组形式）

<template>
  <div>
    <h2 v-bind:class="['active']">我是标题</h2><!--绑定一个css属性-->
    <h3 v-bind:class="['active','active1']">我是标题1</h3><!--绑定两个属性-->
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
  },
  data() {
    return {
    }
  }
}
</script>

<style>
  .active {
    background-color: red;
  }
  .active1 {
    color: #4caf50;
  }
</style>

v-bind动态绑定css属性（对象形式）

<template>
  <div>
    <h2 v-bind:class="{'active':true}">我是标题</h2><!--绑定一个css属性，true表示该css可用-->
    <h2 v-bind:class="{'active':isActive}">我是标题</h2><!--动态绑定一个css属性,该css是否可用，由isActive的值决定-->
    <h3 v-bind:class="{'active':true,'active1':false}">我是标题1</h3><!--绑定两个属性-->
    <h3 v-bind:class="{'active':isActive,'active1':isActive1}">我是标题1</h3>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
  },
  data() {
    return {
      isActive: true,
      isActive1: false
    }
  }
}
</script>

<style>
  .active {
    background-color: red;
  }
  .active1 {
    color: #4caf50;
  }
</style>

v-bind向子组件传值

父组件

<template>
  <div>
    <ChildN v-bind:titles="[message]"></ChildN>
  </div>
</template>

<script>


import ChildN from "@/ChildF";
export default {
  name: 'App',
  components: {
    ChildN,
  },
  data() {
    return {
      message: '我是父组件传向子组件的值'
    }
  }
}
</script>

<style>

</style>

子组件

<template>
  <div>我是孩子组件</div>
  {{titles}}
</template>

<script>
export default {
  name: "ChildN",
  props:{
    titles: {
      type: Array,
      default() {
        return []
      }
    }
  }
}
</script>

<style scoped>

</style>

以上的v-bind的语法糖写法(简写) :

v-bind:class=" " 与 :class=""作用相同