Vue.js屬性綁定v-bind-創(chuàng)新互聯(lián)

v-bind  主要用于屬性綁定，Vue官方提供了一個簡寫方式:bind，例如：

成都一家集口碑和實力的網(wǎng)站建設(shè)服務(wù)商，擁有專業(yè)的企業(yè)建站團隊和靠譜的建站技術(shù)，10多年企業(yè)及個人網(wǎng)站建設(shè)經(jīng)驗 ,為成都上1000+客戶提供網(wǎng)頁設(shè)計制作,網(wǎng)站開發(fā),企業(yè)網(wǎng)站制作建設(shè)等服務(wù),包括成都營銷型網(wǎng)站建設(shè)，成都品牌網(wǎng)站建設(shè)，同時也為不同行業(yè)的客戶提供網(wǎng)站建設(shè)、成都做網(wǎng)站的服務(wù),包括成都電商型網(wǎng)站制作建設(shè),裝修行業(yè)網(wǎng)站制作建設(shè)，傳統(tǒng)機械行業(yè)網(wǎng)站建設(shè),傳統(tǒng)農(nóng)業(yè)行業(yè)網(wǎng)站制作建設(shè)。在成都做網(wǎng)站,選網(wǎng)站制作建設(shè)服務(wù)商就選創(chuàng)新互聯(lián)公司。

<!-- 完整語法 -->
<a v-bind:href="url"></a>

<!-- 縮寫 -->
<a :href="url"></a>

綁定HTML Class

一、對象語法：

我們可以給v-bind:class 一個對象，以動態(tài)地切換class。注意：v-bind:class指令可以與普通的class特性共存

HTML代碼：

<ul class="box" v-bind:class="{'textColor':isColor, 'textSize':isSize}">
    <li>學習Vue</li>
    <li>學習Node</li>
    <li>學習React</li>
</ul>

CSS代碼：

.box{
    border:1px dashed #f0f;
}
.textColor{
    color:#f00;
    background-color:#eef;
}
.textSize{
    font-size:30px;
    font-weight:bold;
}

JS代碼：

var vm= new Vue({
    el:'.box',
    data:{
        isColor:true,
        isSize:true
    }
})

從圖中可以看到，HTML最終渲染為 <ul class="box textColor textSize"></ul>

當 isColor 和 isSize 變化時，class列表將相應(yīng)的更新，例如，將isSize改成false，class列表將變?yōu)?nbsp;<ul class="box textColor"></ul>

也可以直接綁定數(shù)據(jù)里的一個對象：

HTML代碼：

<ul class="box" :class="classObject">
    <li>學習Vue</li>
    <li>學習Node</li>
    <li>學習React</li>
</ul>

JS代碼：

var vm= new Vue({
    el:'.box',
    data:{
        classObject:{
            'textColor':true,
            'textSize':false //不渲染，注意看下面的截圖
        }
    }
})

二、數(shù)組語法

我們可以把一個數(shù)組傳給v-bind:class，以應(yīng)用一個class列表

HTML代碼：

<ul class="box" :class="[classA, classB]">
    <li>學習Vue</li>
    <li>學習Node</li>
    <li>學習React</li>
</ul>

JS代碼：

var vm= new Vue({
    el:'.box',
    data:{
        classA:'textColor',
        classB:'textSize'
    }
})

如果想根據(jù)條件切換列表中的class，可以用三目運算

HTML代碼：

<ul class="box" :class="[isA?classA:'', classB]">
    <li>學習Vue</li>
    <li>學習Node</li>
    <li>學習React</li>
</ul>

JS代碼：

var vm= new Vue({
    el:'.box',
    data:{
        classA:'textColor',
        classB:'textSize',
        isA:false 
    }
})

在這個例子中，首先判斷isA的boolean值，如果為true，則渲染classA；如果為false，則不渲染。classB沒有做三目運算，所以是始終顯示的，看看頁面截圖

對于多個class，可以這么寫：

<div v-bind:class="[classA, { classB: isB, classC: isC }]">

綁定內(nèi)聯(lián)樣式

一、對象語法

v-bind:style 的對象語法十分直觀--非常像CSS，其實它是一個Javascript對象，CSS屬性名必須用駝峰命名法（官方文檔寫的是既可以用駝峰也可以用 短橫分隔命名法），但是用短橫分隔是會報錯的

HTML代碼：（這里演示CSS屬性名用短橫分隔報錯）

<div id="box" :>紅嘴綠鸚哥</div>

JS代碼：

var vm= new Vue({
    el:'#box',
    data:{
        activeColor:'#f00',
        size:'30px',
        shadow:'5px 2px 6px #000'
    }
})

頁面報錯：

當我們按照駝峰命名法的規(guī)則去寫的時候，一切正常：

HTML代碼：

<div id="box" :>紅嘴綠鸚哥</div>

查看頁面效果：

也可以直接綁定到一個樣式對象，這樣更好，讓模板更清晰：

HTML代碼：

<div id="box" :>紅嘴綠鸚哥</div>

JS代碼：

var vm= new Vue({
    el:'#box',
    data:{
        styleObject:{
            color:'red',
            fontSize:'30px'
        }
    }
})

二、數(shù)組語法

可將多個樣式對象應(yīng)用到一個元素上

HTML代碼：

<div class="box" :>好好學習，天天向上</div>

JS代碼：

var vm2= new Vue({
    el:'.box',
    data:{
        styleObjectA:{
            fontSize:'36px',
            color:'blue'
        },
        styleObjectB:{
            textDecoration:'underline'
        }
    }
})

頁面效果：

添加圖片SRC地址

給img標簽的src屬性賦值時，按照傳統(tǒng)的方法`url`：

HTML代碼：

<img class="box" src="`url`" alt="">

JS代碼：

var vm= new Vue({
    el:'.box',
    data:{
        url:'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png'
    }
})

此時，圖片可以正常顯示，但是會報一個404錯誤，查看控制臺可以看到，Vue更加推薦我們使用v-bind:src

使用 v-bind:src  再來試試看

HTML代碼：

<img class="box" :src="url" alt="">

查看頁面截圖：

創(chuàng)新互聯(lián)www.cdcxhl.cn，專業(yè)提供香港、美國云服務(wù)器，動態(tài)BGP最優(yōu)骨干路由自動選擇，持續(xù)穩(wěn)定高效的網(wǎng)絡(luò)助力業(yè)務(wù)部署。公司持有工信部辦法的idc、isp許可證， 機房獨有T級流量清洗系統(tǒng)配攻擊溯源，準確進行流量調(diào)度，確保服務(wù)器高可用性。佳節(jié)活動現(xiàn)已開啟，新人活動云服務(wù)器買多久送多久。

網(wǎng)站題目：Vue.js屬性綁定v-bind-創(chuàng)新互聯(lián)
標題網(wǎng)址：http://bm7419.com/article24/gojje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、ChatGPT、微信小程序、建站公司、網(wǎng)站制作、靜態(tài)網(wǎng)站

廣告

聲明：本網(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)