vue指令——v-bind / 属性绑定

3.2_vue指令-v-bind

: 给标签属性设置vue变量的值

vue指令, 实质上就是特殊的 html 标签属性, 特点: v- 开头

每个指令, 都有独立的作用

• 语法：v-bind:属性名="vue变量"
• 简写：:属性名="vue变量"

<!-- vue指令-v-bind属性动态赋值 -->
<a v-bind:href="url">我是a标签</a>
<img :src="imgSrc">

例:

<template>
  <div>
      <!--  = v-bind:属性名 = "vue变量" -->
    <a :href="url">点我跳转百度</a>
    <img :src="imgSrc" alt="">

  </div>
</template>

<script>
// 只有在js中，才需要主动导入图片后使用
// 💥注意：先通过 import 导入图片
import imgSrc from "../assets/01.gif";
export default {
data () {
    return {
      url:'http://www.baidu.com',
      imgSrc:imgSrc,
    }
}
}
</script>

<style>

</style>