本文介绍常遇在vue中会有v-bind与属性相关的，如 <img/>的src路径，和class属性以及style。
1.img中src
我们知道img标签的src可以跨域请求，可以访问网络中的图片，比如带有http或https地址的图。假设按原理我们有如下代码：
<div id="box">
<!--书写 vuejs 代码-->
<!--img 的src属性存在两种值： 1. 绝对路径 http 或者 https 开头 2. 相对路径，不包含 http 或者 https协议，当前的url地址+相对路径拼成一个完整的url地址发送网络请求-->
<!--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中的当作网络请求.png
src把插值表达式的{{}}解析到地址栏了，当然找不到图片啦！等价于
<!--http://localhost:63342/giteeComH51913/day8/{{ logo }}-->
<img src="{{ logo }}" alt="">
<!--http://localhost:63342/giteeComH51913/day8/1.jpg-->
<img src="./1.jpg" alt="">
<!--
如果这时候你说，那给img标签加上v-pre 它就不解析了呀
<img v-pre src="{{ logo }}" alt="">
可是结果还是会报错，那是因为即使vuejs不解析了，但是浏览器还是会发送请求
加上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属性使用模型变量动态添加
(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>
但是如果是多个类名的时候就要用数组了。
<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是字符串，相当于拼接到了class属性里面。但是在动态绑定之前，标签很可能本来就有class属性，也会合并class新动态绑定的class。
3.style
通过模型变量动态绑定样式，方法和class属性一样，可设置单个。但是设置多个的时候就和class不一样了，不能以数组形式。
<div id="box">
<!--如果要设置多个行内样式，使用字符串的方式是不可以的；样式的模型变量转变为对象方式-->
<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!',
// 传统的字符串只能写单个行内样式的动态绑定，如果是多个必须使用对象的方式
style1: 'font-size: 30px; border: 1px solid red;', // 一段行内样式
style2: 'line-height: 80px;', // 一段行内样式
// 对象方式描述属性
style3: { 'font-size': '30px' },
style4: { 'border': '1px solid red' },
}
});
</script>
同时也可以简写为
<!--: v-bind 提供 js语境，{} 代表一个对象-->
<!--样式名：以中线划分 font-size: 使用引号包裹，则可以使用的中线，如果不使用引号，则需要转换为小驼峰-->
<div :style="{ color: 'red', fontSize: '40px' }">
Lorem ipsum dolor sit amet, consectetur.
Lorem ipsum dolor sit amet, consectetur adipisicing.
</div>
