vue學習記錄-03 動態繫結屬性

阿新 • • 發佈：2021-01-10

技術標籤：Vue學習記錄 vue javascript js html css3

vue學習記錄-03 動態繫結屬性

這篇文章是根據codewhy老師在b站的視訊進行的學習記錄

文章目錄

vue學習記錄-03 動態繫結屬性
一、v-bind的基本使用
二、v-bind動態繫結class
三、一個v-bind的小案例
四、v-bind動態繫結style

一、v-bind的基本使用

如果我們想要動態的繫結一個屬性，使用mustache語法肯定是無能為力的，這個時候就需要藉助v-bind來對值進行動態繫結。
當然，v-bind這麼長而且又常用，所以與v-on一樣，VUE也支援將其直接縮寫為“：”的形式。

<div id='app'>
        <!-- 錯誤做法，此處不能用mustache語法 -->
        <!-- <img src="{{imgURL}}" alt=""> -->
        <img v-bind:src="imgURL" alt="">
        <!-- 縮寫為“：” -->
        <a :href="aHref">百度一下</a>
    < 
/div>

const app = new Vue({
            el: '#app',
            data: {
                message: 'Hello,Vue!',
                imgURL:'https://cn.vuejs.org/images/logo.png',
                aHref:'http://www.baidu.com'
            },
        })

二、v-bind動態繫結class

對class使用v-bind進行繫結是很常見的一種用法。

		<h2 class= 
"active">{{message}}</h2>
        <h2 :class="active">{{message}}</h2>

如果有多個class需要繫結，我們可以用物件的寫法，也可以用陣列的寫法。

物件的寫法：

		<h2 :class="{active:isActive,line:isLine}">{{message}}</h2>
        <!-- 不會刪除的class直接寫出來，可能會刪除的class用v-bind的方式寫出來 -->
        <h2 class="title" :class="{active:isActive,line:isLine}">{{message}}</h2>
        <h2 class="title" :class="getClasses()">{{message}}</h2>
        <button @click="btnClick">點選變色</button>

const app = new Vue({
            el: '#app',
            data: {
                message: 'Hello,Vue!',
                active:'active',
                isActive:true,
                isLine:false
            },
            methods:{
                btnClick:function(){
                    this.isActive=!this.isActive
                },
                getClasses:function(){
                    return {active:this.isActive,line:this.isLine}
                }
            }
        })

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

class的賦值為布林值時，就可以使用方法控制刪除或者新增class

陣列的寫法：

		<h2 class="title" :class="['active','line']">{{message}}</h2>
        <!-- 去掉引號後從字串變成變數 -->
        <h2 class="title" :class="[active,line]">{{message}}</h2>
        <!-- 優化寫法 -->
        <h2 class="title" :class="getClasses()">{{message}}</h2>

const app = new Vue({
            el: '#app',
            data: {
                message: 'Hello,Vue!',
                active:'aaa',
                line:'bbb'
            },
            methods:{
                getClasses:function(){
                    return [this.active,this.line]
                }
            }
        })

如果陣列中是字串，那麼就不會繫結到對應的值

瀏覽器中第一行h2中的active和line並沒有變成data中對應的資料

三、一個v-bind的小案例

現在我們來寫一個小案例來回顧一下。
案例要求：第一列文字為紅色，之後點選哪段文字那麼哪段文字就會變紅。

<div id='app'>
        <ul>
            <!-- 三目寫法 -->
            <!-- <li v-for="(m,index) in movies" @click="changeColor(index)" :class="index==cuerys?'red':''" :title="m">
                {{index}}-{{m}}</li> -->
            <!-- 物件寫法 -->
            <li v-for="(m,index) in movies" @click="changeColor(index)" :class="{'red':cuerys==index}" :title="m">
                {{index}}-{{m}}</li>    
        </ul>
    </div>

const app = new Vue({
            el: '#app',
            data: {
                movies: ['海王', '海爾兄弟', '火影忍者', '進擊的巨人'],
                cuerys: 0
            },
            methods: {
                changeColor: function (index) {
                    this.cuerys = index;
                },
            }
        })

	<style>
        .red {
            color: red;
        }
    </style>

頁面效果：
v-bind

四、v-bind動態繫結style

另外對於style也是會經常使用class進行繫結的，同樣的，也是可以使用物件或者陣列去進行實現。
物件的寫法：

<div id='app'>
        <!-- <h2 :style="{key(屬性名):value(屬性值)}">{{message}}</h2> -->
        <h2 :style="{'font-size':'50px'}">{{message}}</h2>
        <!-- 駝峰寫法,50px必須加上單引號否則當作變數解析 -->
        <h2 :style="{fontSize:'50px'}">{{message}}</h2>
        <!-- finalSize被當作變數解析 -->
        <h2 :style="{fontSize:finalSize}">{{message}}</h2>
        <!-- 也可以寫表示式 -->
        <h2 :style="{fontSize:finalSizeNum+'px'}">{{message}}</h2>
        <h2 :style="{fontSize:finalSizeNum+'px',color:finalColor,backgroundColor:finalBackColor}">{{message}}</h2>
        <!-- 優化 -->
        <h2 :style="styleFun()">{{message}}</h2>
    </div>

const app = new Vue({
            el: '#app',
            data: {
                message: 'Hello,Vue!',
                finalSize: '100px',
                finalSizeNum: 100,
                finalColor: 'red',
                finalBackColor:'Black'
            },
            methods:{
                styleFun:function(){
                    return {fontSize:this.finalSizeNum+'px',color:this.finalColor,backgroundColor:this.finalBackColor}
                }
            }
        })

陣列的寫法：

<div id='app'>
        <h2 :style="[baseStyle,baseStyle1]">{{message}}</h2>
    </div>

const app = new Vue({
            el: '#app',
            data: {
                message: 'Hello,Vue!',
                baseStyle:{backgroundColor:'red'},
                baseStyle1:{fontSize:'100px'}
            },
        })