Vue.js中v-bind指令的用法介紹

更新時(shí)間：2022年03月13日 16:29:06 作者：.NET開發(fā)菜鳥

這篇文章介紹了Vue.js中v-bind指令的用法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

一、什么是v-bind指令

v-bind指令用于響應(yīng)更新HTML特性，允許將一個(gè)或多個(gè)屬性動(dòng)態(tài)綁定到表達(dá)式。v-bind是應(yīng)用在動(dòng)態(tài)屬性上面的。

二、語法

v-bind語法如下：

v-bind:動(dòng)態(tài)屬性名稱="變量"

也可以簡(jiǎn)寫成下面的形式：

:動(dòng)態(tài)屬性名稱="變量"

代碼示例如下：

<img :src="imgUrl" :title="title" />

這里的src和title都是<img>標(biāo)簽的屬性，這里都是綁定到變量。

v-bind中還可以使用判斷，例如：

<img :src="flag?imgUrl:imgUrl2" />

這里表示如果flag變量的值為true，那么src屬性的值是變量imgUrl的值，否則src的屬性值就是變量imgUrl2對(duì)應(yīng)的值。

注意：只要是HTML標(biāo)簽的屬性都可以這樣去綁定屬性值。

三、在class屬性中使用v-bind指令

代碼示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>在class屬性中使用v-bind指令</title>
    <!--引入vue.js-->
    <script src="node_modules/vue/dist/vue.js" ></script>
    <script>
       window.onload=function(){
           // 構(gòu)建vue實(shí)例
           new Vue({
               el:"#my",// el即element，表示掛載的元素，不能掛載在HTML和body元素上面
               // data表示數(shù)據(jù),data中可以是各種數(shù)據(jù)格式
               data:{
                      flag:true,
                      varStyle:"bindStyle", //值是樣式的名稱
                      style1:"colorStyle",
                      style2:"colorStyle2"
               },
               // 方法
               methods:{

               }
           })
       }
    </script>
    <style>
      .colorStyle {
        color: #ff6600;
      }
      .colorStyle2{
          margin-top: 10px;
          background-color: chartreuse;
          border: 1px solid blue;
      }
      .bindStyle {
        margin-top: 5px;
        color: red;
      }
      .bindStyle2 {
        margin-top: 5px;
        color: red;
        background-color: green;
      }
    </style>
</head>
<body>
    <div id="my">
        <!--單個(gè)樣式引用,這里是直接寫的data里面變量的名稱-->
        <div :class="varStyle">這里是使用v-bind改變樣式</div>
        <!--單個(gè)樣式引用，雙引號(hào)加單引號(hào)，單引號(hào)里面是樣式的名稱，這種方式可以不在data里面寫變量-->
        <div :class="'bindStyle2'">直接引用樣式的名稱，不需要在data里面定義變量</div>
        <!--多個(gè)樣式引用 使用數(shù)組的方式-->
        <div :class="[style1,style2]">這里是同時(shí)使用多個(gè)樣式</div>
        <!--條件判斷 格式：樣式名：判斷條件 注意：樣式名不能用變量-->
        <div :class="{'colorStyle2':flag}">條件判斷</div>
        <!--三目運(yùn)算符 flag為真顯示style2變量對(duì)應(yīng)的樣式，否則顯示style1變量對(duì)應(yīng)的樣式-->
        <div :class="flag?style2:style1">三目運(yùn)算符</div>
    </div>
</body>
</html>

效果圖如下：

四、在style屬性中使用v-bind指令

代碼示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>style示例</title>
    <!--引入vue.js-->
    <script src="node_modules/vue/dist/vue.js" ></script>
    <script>
       window.onload=function(){
           // 構(gòu)建vue實(shí)例
           new Vue({
               el:"#my",// el即element，表示掛載的元素，不能掛載在HTML和body元素上面
               // data表示數(shù)據(jù),data中可以是各種數(shù)據(jù)格式
               data:{
                      flag:true,//布爾型
                      style1:{background:'blue'},
                      style2:{color:'red'},
                      unify:"unifyStyle"
               },
               // 方法
               methods:{

               }
           })
       }
    </script>
    <style>
       .unifyStyle{
           margin-top: 10px;
       }
    </style>
</head>
<body>
    <div id="my">
          <!--直接寫內(nèi)聯(lián)樣式：要采用駝峰寫法，中間的-去掉-->
          <div :style="{color:'#f60',fontSize:'20px',marginTop:'10px'}">
              內(nèi)聯(lián)樣式
          </div>
          <!--單個(gè)引用-->
          <div :style="style1" :class="unify">
                單個(gè)引用
          </div>
          <!--多個(gè)樣式引用-->
          <div :style="[style1,style2]" :class="unify">多個(gè)樣式引用</div>
          <!--三目運(yùn)算符-->
          <div :style="flag?style1:style2" :class="unify">使用三目運(yùn)算符進(jìn)行判斷</div>
    </div>
</body>
</html>

效果圖如下：