本文介紹常遇在vue中會有v-bind與屬性相關(guān)的，如 <img/>的src路徑，和class屬性以及style。

1.img中src

我們知道img標(biāo)簽的src可以跨域請求，可以訪問網(wǎng)絡(luò)中的圖片，比如帶有http或https地址的圖。假設(shè)按原理我們有如下代碼：

<div id="box">
    <!--書寫 vuejs 代碼-->
    <!--img 的src屬性存在兩種值： 1. 絕對路徑 http 或者 https 開頭 2. 相對路徑，不包含 http 或者 https協(xié)議，當(dāng)前的url地址+相對路徑拼成一個完整的url地址發(fā)送網(wǎng)絡(luò)請求-->
    <!--http://localhost:63342/giteeComH51913/day8/{{ logo }}-->
    <img v-pre src="{{ logo }}" alt="">
    <!--http://localhost:63342/giteeComH51913/day8/1.jpg-->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>

    var vm = new Vue({
        el: '#box',
        data: {
            title: 'hi vuejs!',
            logo: 'https://cn.vuejs.org/images/logo.png',
            // 圖片的url地址

        }
    });


</script>

報錯.png

誤把src中的當(dāng)作網(wǎng)絡(luò)請求.png

src把插值表達(dá)式的{{}}解析到地址欄了，當(dāng)然找不到圖片啦！等價于

<!--http://localhost:63342/giteeComH51913/day8/{{ logo }}-->
    <img src="{{ logo }}" alt="">
    <!--http://localhost:63342/giteeComH51913/day8/1.jpg-->
 <img src="./1.jpg" alt="">
    <!--

如果這時候你說，那給img標(biāo)簽加上v-pre 它就不解析了呀

<img v-pre src="{{ logo }}" alt="">

可是結(jié)果還是會報錯，那是因為即使vuejs不解析了，但是瀏覽器還是會發(fā)送請求

加上v-pre.png

這個時候，就要用 v-bind

<img v-bind:src=‘logo’ alt="">//logo是模型變量，單雙引號都可以
<img :src='logo' alt="">//簡寫形式
<img v-bind:src="'https://cn.vuejs.org/images/logo.png'" alt="">
<img v-bind:src='"https://cn.vuejs.org/images/logo.png"' alt="">//也可以寫入字符串，注意單雙引號使用

2.class屬性使用模型變量動態(tài)添加

(1)方法一

<style>
        .container{
            color:gold;
        }
 </style>
 <div v-bind:class="className1">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, aspernatur, consequatur culpa debitis dolorem eaque esse harum, minus molestiae molestias natus pariatur possimus quod reprehenderit sed sit vitae voluptatibus voluptatum.
  </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>

    var vm = new Vue({
        el: '#box',
        data: {
            title: 'hi vuejs!',
             className1:'container',

        }
    });
</script>

但是如果是多個類名的時候就要用數(shù)組了。

<style>
        .container{
            color:gold;
        }
        .un{
            text-decoration: underline;
        }
        .className3{
            color: red;
        }

 </style>
 <div v-bind:class="[className1,className2,'className3']">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, aspernatur, consequatur culpa debitis dolorem eaque esse harum, minus molestiae molestias natus pariatur possimus quod reprehenderit sed sit vitae voluptatibus voluptatum.
  </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>

    var vm = new Vue({
        el: '#box',
        data: {
            title: 'hi vuejs!',
            className1:'container',
            className2:'un',//多個樣式的話錯誤寫法

        }
    });
</script>

其中className3是字符串，相當(dāng)于拼接到了class屬性里面。但是在動態(tài)綁定之前，標(biāo)簽很可能本來就有class屬性，也會合并class新動態(tài)綁定的class。

3.style

通過模型變量動態(tài)綁定樣式，方法和class屬性一樣，可設(shè)置單個。但是設(shè)置多個的時候就和class不一樣了，不能以數(shù)組形式。

<div id="box">
 <!--如果要設(shè)置多個行內(nèi)樣式，使用字符串的方式是不可以的；樣式的模型變量轉(zhuǎn)變?yōu)閷ο蠓绞?->
    <div class="container" style="color:gold;"  v-bind:style="[style1, style2]">//不會出樣式
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, aspernatur, consequatur culpa debitis dolorem eaque esse harum, minus molestiae molestias natus pariatur possimus quod reprehenderit sed sit vitae voluptatibus voluptatum.
    </div>
     <div :style="[style3, style4]">//正確寫法
        Lorem ipsum dolor sit amet, consectetur.
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>

    var vm = new Vue({
        el: '#box',
        data: {
            title: 'hi vuejs!',
            // 傳統(tǒng)的字符串只能寫單個行內(nèi)樣式的動態(tài)綁定，如果是多個必須使用對象的方式
            style1: 'font-size: 30px; border: 1px solid red;', // 一段行內(nèi)樣式
            style2: 'line-height: 80px;', // 一段行內(nèi)樣式
            // 對象方式描述屬性
            style3: { 'font-size': '30px' },
            style4: { 'border': '1px solid red' },
        }
    });

</script>

同時也可以簡寫為

 <!--: v-bind 提供 js語境，{} 代表一個對象-->
    <!--樣式名：以中線劃分 font-size: 使用引號包裹，則可以使用的中線，如果不使用引號，則需要轉(zhuǎn)換為小駝峰-->
    <div :style="{ color: 'red', fontSize: '40px' }">
        Lorem ipsum dolor sit amet, consectetur.
        Lorem ipsum dolor sit amet, consectetur adipisicing.
    </div>