Vue의 동적 속성 바인딩 명령어 v-bind에 대한 심층 분석

<!--完整写法-->
<标签名 v-bind:标签属性名="vue实例中的数据属性名"/>

<!--简化写法-->
<标签名 :标签属性名="vue实例中的数据属性名"/>

<div id="app">
        <!-- 错误的做法：这里不能使用mustache语法，mustache语法是在内容中显示 -->
        <img src="{{imgURL}}" alt=""> // 直接报错，会被当成字符而不是变量
        
        <!-- 正确的做法，使用v-bind指令 -->
        <img v-bind:src="imgURL" alt="">  // 加了v-bind:后vue会对它进行解析，把它的属性值当成变量
        <a v-bind:href="aHref">百度一下</a>
        
        <!-- 语法糖的写法 -->
        <img :src="imgURL" alt="">
        <a :href="aHref">百度一下</a>
        
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: &#39;你好啊！&#39;,
                // 从服务器请求过来的数据
                imgURL: &#39;https://img-home.csdnimg.cn/images/20210716103807.jpg&#39;,
                aHref: &#39;http://www.baidu.com&#39;
            }
        })
    </script>

v-bind:class= "{key1：value1，key2：value2}"

  //样式
 <style>
    .active{
      color: red;
     }
 </style>
--------------------------------------
<div id="app">
  <h2 class="active">{{message}}</h2>
  //第一种：直接用style中的样式，固定写死；
  
  <h2 v-bind:class="active">{{message}}</h2>
  //第二种：用指令v-bind,class的属性值active为变量；
  //vue解析，变量对应data中active属性值，则用了active的样式；
  
  <h2 v-bind:class="{active:isActive, line:isLine}">{{message}}</h2>
  //第三种：用指令v-bind；后面接对象{key1：value1，key2：value2}
  //isActive为true则active样式起作用。
  //isActive为false则active样式不起作用。

  <button v-on:click="btn">按钮</button>
  //设置按钮，让点击按钮，颜色变化

  <h2 class="title" v-bind:class="{active:isActive, line:isLine}">{{message}}</h2>
  //用固定写的class值为title和动态添加的class结合，它们不会覆盖

  <h2 v-bind:class="getClasses()">{{message}}</h2>
  //class中的对象比较复杂，则直接放在一个methods中,然后调用这个函数
</div>

<script>
  const app = new Vue({
    el:"#app",
    data:{
      message:"你好啊",
      active:"active",
      isActive:true,
      isLine:true
    },
    methods:{
      btn:function () {
        this.isActive=!this.isActive
      },
      //执行该函数，让isActive变为相反的值，若true变为false，若false变为true；
      //isActive的取值决定class是否用该变量，是否用对应的样式；
      getClasses:function () {
        return  {active:this.isActive, line:this.isLine}
      }
      //返回，作为class的值
    }
  })
</script>

<div id="app">
	<h2 class="title" :class="[&#39;active&#39;,&#39;line&#39;]">{{message}}</h2> 
	<h2 class="title active line">{{message}}</h2> 
	// 上面两种的效果都是一样的
	
	<h2 class="title" :class="getClasses()">{{message}}</h2> 
	// 将数组放在方法中，然后调用该方法
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            message: &#39;你好啊！&#39;,
            active: &#39;aaa&#39;,
            line: &#39;bbb&#39;
        },
        methods: {
            getClasses: function () {
                return [this.active, this.line]
            }
        }
    })
</script>

<div id="app">
	<!-- 如下：finalSize当成一个固定值来使用 -->
	<h2 :style="{fontSize:&#39;50px&#39;}">{{message}}</h2> 
	
	<!-- 如下：finalSize当成一个变量来使用,通过data动态绑定 -->
	<h2 :style="{fontSize: finalSize + &#39;px&#39;, backgroundColor: finalColor }">{{message}}</h2>
	
	<!-- 如下：属性过多时，可以放在方法中-->
	<h2 :style="getStyles()">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
    el: "#app",
    data: {
        message: &#39;你好啊！&#39;,
        finalSize: 100,
        finalColor: &#39;red&#39;
    },
    methods: {
        getStyles: function () {
            return { fontSize: this.finalSize + &#39;px&#39;, backgroundColor: this.finalColor }
        }
    }
})
</script>