三、VUE基础学习篇（动态绑定）- v-bind（v-bind:src 、v-bind:href、v-bind:class、v-bind:style）-优快云博客

本文链接：https://blog.youkuaiyun.com/IT_CREATE/article/details/106579556

码云实时更新学习demo地址：https://gitee.com/dxl96/vuexuexi

VUE基础篇（插值操作）

1、v-bind

在标签上绑定属性值，不可以用Mustache语法，也就是{ { }}，必须使用v-bind来绑定属性，v-bind的格式是 v-bind:标签属性名
或者语法糖形式 :标签属性名
代码中展示了 v-bind:src 、v-bind:href 、v-bind:class
—对于 v-bind:src 、v-bind:href来说可以绑定data中的变量，也可以绑定方法，方法返回的值就是绑定的值
—对于 v-bind:class 来说：
1）可以绑定对象，可以绑定对象的形式，{属性1:boolean,属性2:boolean …}这种形式，我们通过动态绑定这些布尔值，如果布尔值是true的话，说明就会绑定到这个对象的属性名,如果是false的话就不会绑定这个对象的属性名。
举例：比如这里，{active: isActive,line: isLine} 假设active的值(isActive)是true，那么class这个标签属性就有active这个值，也就是class=“active”；假设 active的值和line的值都为true，那么就是class=“active line”；如果其中active的值为true，line的值为false，那么class=“active”
2）还可以写成绑定数组的形式，这种形式[‘active’,‘line’]
3）还可以绑定方法，方法返回对象或者数组，也就是上两种形式的数据

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue动态绑定</title>
  <style>
    img {
    
      height: 60px;
    }

    .active {
    
      color: red;
    }
  </style>
</head>
<body>

<div id="app">
  <!--  ■错误写法，不能再标签上使用mustache语法，不能够识别-->
  <!--  <img src="{
   {imgURL}}">-->

  <!--  ■正确做法，使用v-bind指令，来进行值的动态绑定，也就是值的替换-->
  <img v-bind:src="imgURL"/>
  <a v-bind:href="aHref">百度一下</a>
  <!--  ■也可以绑定方法，方法返回一个需要的值-->
  <img v-bind:src="getImgUrl()"/>
  <a v-bind:href="getHref()">百度一下