本文介紹常遇在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é)果還是會報錯诅蝶，那是因?yàn)榧词箆uejs不解析了，但是瀏覽器還是會發(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>
