本篇內(nèi)容主要講解“Vue的動態(tài)屬性綁定指令v-bind怎么使用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“Vue的動態(tài)屬性綁定指令v-bind怎么使用”吧!

創(chuàng)新互聯(lián)公司服務(wù)項目包括依蘭網(wǎng)站建設(shè)、依蘭網(wǎng)站制作、依蘭網(wǎng)頁制作以及依蘭網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，依蘭網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到依蘭省份的部分城市，未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

v-bind指令是專門操作屬性的指令，那么什么是屬性呢？例如我們經(jīng)常設(shè)置圖片是src，設(shè)置鼠標(biāo)懸停的文本是title，還有類class等，這種就是屬性。

1、v-bind指令的介紹和基本使用

1）、作用：動態(tài)綁定屬性

除了內(nèi)容需要動態(tài)來實現(xiàn)之外，有時候元素的屬性我們也希望能夠動態(tài)來改變

比如可以動態(tài)綁定a元素的href屬性，img的src屬性等等。

2）、與插值操作的對比：

插值操作的主要作用是將Vue實例中的數(shù)據(jù)插入到模板當(dāng)中，改變data中的數(shù)據(jù)可以動態(tài)改變顯示的內(nèi)容。而很多時候我們的屬性值也是需要變化的，比如src可能是從服務(wù)器請求過來的，把值放到vue實例的data中，然后將data中的屬性賦到模板中的屬性里面，我們只需要修改data中的值就可以實時響應(yīng)。

3）、寫法：在屬性前面加上v-bind:（語法糖：直接在屬性前面加上 :）

<!--完整寫法-->
<標(biāo)簽名 v-bind:標(biāo)簽屬性名="vue實例中的數(shù)據(jù)屬性名"/>

<!--簡化寫法-->
<標(biāo)簽名 :標(biāo)簽屬性名="vue實例中的數(shù)據(jù)屬性名"/>

示例

<div id="app">
        <!-- 錯誤的做法：這里不能使用mustache語法，mustache語法是在內(nèi)容中顯示 -->
        <img src="{{imgURL}}" alt=""> // 直接報錯，會被當(dāng)成字符而不是變量
        
        <!-- 正確的做法，使用v-bind指令 -->
        <img v-bind:src="imgURL" alt="">  // 加了v-bind:后vue會對它進(jìn)行解析，把它的屬性值當(dāng)成變量
        <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: '你好啊！',
                // 從服務(wù)器請求過來的數(shù)據(jù)
                imgURL: 'https://img-home.csdnimg.cn/images/20210716103807.jpg',
                aHref: 'http://www.baidu.com'
            }
        })
    </script>

2、v-bind動態(tài)綁定class屬性（對象語法）

1）、作用：

動態(tài)綁定class屬性之后，class的值是一個變量，可以將它放到data中動態(tài)綁定樣式

2）、用法：

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

• 若對象內(nèi)容value值為true，則該key樣式起作用

• 若對象內(nèi)容value值為false，則該key樣式不起作用

value值放在data中作為變量，進(jìn)行使用，當(dāng)使用時讓它為true，不使用時為false，

這樣就可以動態(tài)的修改屬性class的值

  //樣式
 <style>
    .active{
      color: red;
     }
 </style>
--------------------------------------
<div id="app">
  <h3 class="active">{{message}}</h3>
  //第一種：直接用style中的樣式，固定寫死；
  
  <h3 v-bind:class="active">{{message}}</h3>
  //第二種：用指令v-bind,class的屬性值active為變量；
  //vue解析，變量對應(yīng)data中active屬性值，則用了active的樣式；
  
  <h3 v-bind:class="{active:isActive, line:isLine}">{{message}}</h3>
  //第三種：用指令v-bind；后面接對象{key1：value1，key2：value2}
  //isActive為true則active樣式起作用。
  //isActive為false則active樣式不起作用。

  <button v-on:click="btn">按鈕</button>
  //設(shè)置按鈕，讓點擊按鈕，顏色變化

  <h3 class="title" v-bind:class="{active:isActive, line:isLine}">{{message}}</h3>
  //用固定寫的class值為title和動態(tài)添加的class結(jié)合，它們不會覆蓋

  <h3 v-bind:class="getClasses()">{{message}}</h3>
  //class中的對象比較復(fù)雜，則直接放在一個methods中,然后調(diào)用這個函數(shù)
</div>

<script>
  const app = new Vue({
    el:"#app",
    data:{
      message:"你好啊",
      active:"active",
      isActive:true,
      isLine:true
    },
    methods:{
      btn:function () {
        this.isActive=!this.isActive
      },
      //執(zhí)行該函數(shù)，讓isActive變?yōu)橄喾吹闹担魌rue變?yōu)閒alse，若false變?yōu)閠rue；
      //isActive的取值決定class是否用該變量，是否用對應(yīng)的樣式；
      getClasses:function () {
        return  {active:this.isActive, line:this.isLine}
      }
      //返回，作為class的值
    }
  })
</script>

3、v-bind動態(tài)綁定class屬性（數(shù)組語法）

用指令v-bind后面接一個數(shù)組，[key1,key2…]，則class值為數(shù)組中內(nèi)容，可為多個；

數(shù)組語法一般用的不多，因為它也寫死了，既然寫死了，那可以直接用原始的方法

<div id="app">
	<h3 class="title" :class="['active','line']">{{message}}</h3> 
	<h3 class="title active line">{{message}}</h3> 
	// 上面兩種的效果都是一樣的
	
	<h3 class="title" :class="getClasses()">{{message}}</h3> 
	// 將數(shù)組放在方法中，然后調(diào)用該方法
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            message: '你好啊！',
            active: 'aaa',
            line: 'bbb'
        },
        methods: {
            getClasses: function () {
                return [this.active, this.line]
            }
        }
    })
</script>

4、v-bind動態(tài)綁定內(nèi)聯(lián)style屬性（對象語法）

1）、應(yīng)用場景：

組件開發(fā)中，可能將某個塊(如導(dǎo)航欄)封裝起來，在不同地方使用這個塊的時候，可能想讓顯示不同的樣式，可以用v-bind動態(tài)綁定屬性style

2）、格式為：

<h3 v-bind:style="{"樣式名":"樣式值"}">{{message}}</h3>

樣式值加引號時，vue在解析的時候，會把它當(dāng)成一個固定值

<h3 v-bind:style="{"樣式名":樣式值}">{{message}}</h3>

樣式值不加雙引號時，則當(dāng)做變量，vue將它解析成一個變量， 變量值會在data中找

<div id="app">
	<!-- 如下：finalSize當(dāng)成一個固定值來使用 -->
	<h3 :style="{fontSize:'50px'}">{{message}}</h3> 
	
	<!-- 如下：finalSize當(dāng)成一個變量來使用,通過data動態(tài)綁定 -->
	<h3 :style="{fontSize: finalSize + 'px', backgroundColor: finalColor }">{{message}}</h3>
	
	<!-- 如下：屬性過多時，可以放在方法中-->
	<h3 :style="getStyles()">{{message}}</h3>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
    el: "#app",
    data: {
        message: '你好啊！',
        finalSize: 100,
        finalColor: 'red'
    },
    methods: {
        getStyles: function () {
            return { fontSize: this.finalSize + 'px', backgroundColor: this.finalColor }
        }
    }
})
</script>

5、v-bind動態(tài)綁定內(nèi)聯(lián)style屬性（數(shù)組語法）

數(shù)組語法格式為：<h3 v-bind:style="[base,base2]">{{message}}</h3>

同樣不常用

<div id="app">
	<h3 :style="[baseStyle,baseStyle1]">{{message}}</h3>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            message: '你好啊！',
            baseStyle: { backgroundColor: 'red' },
            baseStyle1: { fontSize: '100px' },
        }
    })
</script>

注意：

1、動態(tài)參數(shù)使用時應(yīng)避免使用大寫字母，因為瀏覽器會將元素的屬性名強制轉(zhuǎn)化成小寫字母

<div id="app">
      <a v-bind:[Attribute] = "url">動態(tài)參數(shù)</a>
</div>
<script src="../../plugings/vue.js"></script>
<script>
        var vm = new Vue({
                el: "#app",
                data: {
                    Attribute: "href",
                    url: "http://www.baidu.com"
                }
        })
</script>

相關(guān)的報錯信息為：

2、動態(tài)參數(shù)中不能含有引號和空格

當(dāng)含有引號時會進(jìn)行相關(guān)紅色報錯：

當(dāng)含有空格時其在瀏覽器端的報錯情況如下所示：

到此，相信大家對“Vue的動態(tài)屬性綁定指令v-bind怎么使用”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

分享文章：Vue的動態(tài)屬性綁定指令v-bind怎么使用
鏈接URL：http://chinadenli.net/article30/goecso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站、搜索引擎優(yōu)化、手機網(wǎng)站建設(shè)、網(wǎng)站營銷、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)