Vue必须掌握的指令之v-bind.

今天就来给大家说说几个Vue常用的指令. 1.v-bind 如何动态的设置img的src的内容?这个时候就要用到我们的v-bind指令.
v-bind的作用.
v-bind用来动态绑定标签上的属性值.
注意:标签上的属性值不能使用插值表达式来设置. 格式

<元素 v-bind:属性名1="值1" v-bind:属性名2="值2"></元素>
// 简写, 省略v-bind
<元素 :属性名1="值1" :属性名2="值2"></元素>

简单写法:

<img :src="data数据">

一般在是在属性名的=里面写一个data中的数据项，  :属性名="数据项" 称之为：把x绑定在y属性上
代码

<template>
     <h2>v-bind绑定属性值</h2>
     <p>{{name}}</p>
     <!-- 绑定属性 
      v-bind:src 可以简写成  :src 
    -->
     <!-- <img src="{{imgSrc}}"/> -->
     <img v-bind:src="imgSrc" v-bind:id="id"/>
   </template>
   <script>

        data () {
          return {
            name: "尤大大",
            id: 'imgHeader',
            imgSrc: "https://bkimg.cdn.bcebos.com/pic/4afbfbedab64034f29596c8ba6c379310b551da2"
          }
        }
   </script>