Vue的動(dòng)態(tài)屬性綁定指令v-bind怎么使用

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

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

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

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

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

除了內(nèi)容需要?jiǎng)討B(tài)來(lái)實(shí)現(xiàn)之外，有時(shí)候元素的屬性我們也希望能夠動(dòng)態(tài)來(lái)改變

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

2）、與插值操作的對(duì)比：

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

3）、寫(xiě)法：在屬性前面加上v-bind:（語(yǔ)法糖：直接在屬性前面加上 :）

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

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

示例

<div id="app">
        <!-- 錯(cuò)誤的做法：這里不能使用mustache語(yǔ)法，mustache語(yǔ)法是在內(nèi)容中顯示 -->
        <img src="{{imgURL}}" alt=""> // 直接報(bào)錯(cuò)，會(huì)被當(dāng)成字符而不是變量
        
        <!-- 正確的做法，使用v-bind指令 -->
        <img v-bind:src="imgURL" alt="">  // 加了v-bind:后vue會(huì)對(duì)它進(jìn)行解析，把它的屬性值當(dāng)成變量
        <a v-bind:href="aHref">百度一下</a>
        
        <!-- 語(yǔ)法糖的寫(xiě)法 -->
        <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;,
                // 從服務(wù)器請(qǐng)求過(guò)來(lái)的數(shù)據(jù)
                imgURL: 'https://img-home.csdnimg.cn/images/20210716103807.jpg',
                aHref: 'http://www.baidu.com'
            }
        })
    </script>

2、v-bind動(dòng)態(tài)綁定class屬性（對(duì)象語(yǔ)法）

1）、作用：

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

2）、用法：

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

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

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

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

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

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

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

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

  <h3 v-bind:class="getClasses()">{{message}}</h3>
  //class中的對(duì)象比較復(fù)雜，則直接放在一個(gè)methods中,然后調(diào)用這個(gè)函數(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)橄喾吹闹?，若true變?yōu)閒alse，若false變?yōu)閠rue；
      //isActive的取值決定class是否用該變量，是否用對(duì)應(yīng)的樣式；
      getClasses:function () {
        return  {active:this.isActive, line:this.isLine}
      }
      //返回，作為class的值
    }
  })
</script>

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

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

數(shù)組語(yǔ)法一般用的不多，因?yàn)樗矊?xiě)死了，既然寫(xiě)死了，那可以直接用原始的方法

<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: '你好?。?#39;,
            active: 'aaa',
            line: 'bbb'
        },
        methods: {
            getClasses: function () {
                return [this.active, this.line]
            }
        }
    })
</script>

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

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

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

2）、格式為：

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

樣式值加引號(hào)時(shí)，vue在解析的時(shí)候，會(huì)把它當(dāng)成一個(gè)固定值

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

樣式值不加雙引號(hào)時(shí)，則當(dāng)做變量，vue將它解析成一個(gè)變量， 變量值會(huì)在data中找

<div id="app">
	<!-- 如下：finalSize當(dāng)成一個(gè)固定值來(lái)使用 -->
	<h3 :style="{fontSize:'50px'}">{{message}}</h3> 
	
	<!-- 如下：finalSize當(dāng)成一個(gè)變量來(lái)使用,通過(guò)data動(dòng)態(tài)綁定 -->
	<h3 :style="{fontSize: finalSize + 'px', backgroundColor: finalColor }">{{message}}</h3>
	
	<!-- 如下：屬性過(guò)多時(shí)，可以放在方法中-->
	<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動(dòng)態(tài)綁定內(nèi)聯(lián)style屬性（數(shù)組語(yǔ)法）

數(shù)組語(yǔ)法格式為：<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: '你好?。?#39;,
            baseStyle: { backgroundColor: 'red' },
            baseStyle1: { fontSize: '100px' },
        }
    })
</script>

注意：

1、動(dòng)態(tài)參數(shù)使用時(shí)應(yīng)避免使用大寫(xiě)字母，因?yàn)闉g覽器會(huì)將元素的屬性名強(qiáng)制轉(zhuǎn)化成小寫(xiě)字母

<div id="app">
      <a v-bind:[Attribute] = "url">動(dòng)態(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)的報(bào)錯(cuò)信息為：

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

當(dāng)含有引號(hào)時(shí)會(huì)進(jìn)行相關(guān)紅色報(bào)錯(cuò)：

當(dāng)含有空格時(shí)其在瀏覽器端的報(bào)錯(cuò)情況如下所示：

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

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

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

廣告

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