三、VUE基础学习篇（动态绑定）- v-bind（v-bind:src 、v-bind:href、v-bind:class、v-bind:style）
·
码云实时更新学习demo地址：https://gitee.com/dxl96/vuexuexi
VUE基础篇（插值操作）
1、v-bind
在标签上绑定属性值，不可以用Mustache语法，也就是{{ }}，必须使用v-bind来绑定属性，v-bind的格式是 v-bind:标签属性名
或者语法糖形式 :标签属性名
代码中展示了 v-bind:src 、v-bind:href 、v-bind:class
—对于 v-bind:src 、v-bind:href来说 可以绑定data中的变量，也可以绑定方法，方法返回的值就是绑定的值
—对于 v-bind:class 来说：
1）可以绑定对象，可以绑定对象的形式，{属性1:boolean,属性2:boolean …}这种形式，我们通过动态绑定这些布尔值，如果布尔值是true的话，说明就会绑定到这个对象的属性名,如果是false的话就不会绑定这个对象的属性名。
举例：比如这里，{active: isActive,line: isLine} 假设active的值(isActive)是true，那么class这个标签属性就有active这个值，也就是class=“active”；假设 active的值和line的值都为true，那么就是class=“active line”；如果其中active的值为true，line的值为false，那么class=“active”
2）还可以写成绑定数组的形式，这种形式[‘active’,‘line’]
3）还可以绑定方法，方法返回对象或者数组，也就是上两种形式的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue动态绑定</title>
<style>
img {
height: 60px;
}
.active {
color: red;
}
</style>
</head>
<body>
<div id="app">
<!-- ■错误写法，不能再标签上使用mustache语法，不能够识别-->
<!-- <img src="{{imgURL}}">-->
<!-- ■正确做法，使用v-bind指令，来进行值的动态绑定，也就是值的替换-->
<img v-bind:src="imgURL"/>
<a v-bind:href="aHref">百度一下</a>
<!-- ■也可以绑定方法，方法返回一个需要的值-->
<img v-bind:src="getImgUrl()"/>
<a v-bind:href="getHref()">百度一下</a>
<!-- ■v-bind指令语法糖的写法，用 : 替代 v-bind: -->
<img :src="imgURL"/>
<a :href="aHref">百度一下</a>
<!------------------------------------------------------------------------------------------------------------------------------->
<!-- ■绑定数据可以和原标签属性值共存，vue会解析合并绑定的值和原来的值,假如原标签的属性值只能是一个，比如href这种，要是绑定语法和原语法都存在，则原标签生效-->
<!-- ■v-bind:class绑定可以绑定对象的形式，{属性1:boolean,属性2:boolean ...}这种形式，我们通过动态绑定这些布尔值，如果布尔值是true的话，说明就会绑定到这个对象的属性名,
如果是false的话就不会绑定这个对象的属性名
举例：比如这里，{active: isActive,line: isLine} 假设active的值(isActive)是true，那么class这个标签属性就有active这个值，也就是class=“active”；假设
active的值和line的值都为true，那么就是class=“active line”；如果其中active的值为true，line的值为false，那么class=“active”
-->
<h2 v-bind:class="{active: isActive,line: isLine}">{{message}}</h2>
<!-- ■将上面这种直接绑定对象的方式，还可以改成绑定方法，方法中返回这个对象即可-->
<h2 v-bind:class="getClass()">{{message}}</h2>
<!-- ■还可以写成绑定数组的形式，同样的，也可以像上面绑定方法，方法返回数组-->
<!-- 绑定数据和原来的属性数据可以同时使用,它会将绑定的和原来的进行解析合并,比如这里，就会是class=“title active line”-->
<h2 class="title" v-bind:class="['active','line']">{{message}}</h2>
<!-- ■将上面这种直接绑定数组的方式，还可以改成绑定方法，方法中返回这个数组即可-->
<h2 class="title" v-bind:class="getClass2()">{{message}}</h2>
<!-- ■监听点击事件-->
<button v-on:click="btnClick">点击一下</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "vue app",
imgURL: "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1590919517&di=f0e49723a8334e9576244d9736cf81a5&src=http://a3.att.hudong.com/14/75/01300000164186121366756803686.jpg",
aHref: "http://www.baidu.com",
isActive: true,
isLine: true
},
methods: {
btnClick: function () {
// 当点按钮时切换isActive的值取反，也就是true和false交替赋值
// 当该值改变时，也就意味着上面绑定了这个值的h2标签的class属性交替存在去除active这个值
// 因为上面css已经对class含有active的标签进行设置字体颜色为红色，所以我们在点击按钮时就能够看到h2标签里的内容红色和黑色之间交替变换
this.isActive = !this.isActive
},
getClass: function () {
return {active: this.isActive, line: this.isLine};
},
getClass2:function(){
return ['active','line']
},
getHref: function () {
return "http://www.baidu.com"
},
getImgUrl: function () {
return "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1590919517&di=f0e49723a8334e9576244d9736cf81a5&src=http://a3.att.hudong.com/14/75/01300000164186121366756803686.jpg"
}
}
});
</script>
</body>
</html>
效果
2、动态绑定style
v-bind:style 或者 语法糖形式 :style
可以绑定数据的方式有：
1）对象
2）数组
3）方法（方法返回对象或者数组）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态绑定style</title>
</head>
<body>
<div id="app">
<!-- ■v-bind:style 绑定style ,以绑定对象的形式进行绑定 {key(属性名):value(属性值)} 属性名的形式可以是小驼峰的形式，也可以是原名称以-分割的形式-->
<h2 :style="{fontSize:finalSize,color:color}">{{message}}</h2>
<!-- ■如果是直接进行赋值的话，必须以单引号包裹起来，否则它会认为这是个变量去解析，然后就会找不到这个变量，就像这里的 50px 用单引号包裹表示他是一个值-->
<h2 :style="{fontSize:'50px'}">{{message}}</h2>
<h2 :style="{fontSize:finalNum+'px',backgroundColor:'red'}">{{message}}</h2>
<!-- ■也可以调用方法的方式返回对象的形式进行绑定-->
<h2 :style="getStyle()">{{message}}</h2>
<!-- ■也可以是数组的形式来进行数据绑定-->
<h2 :style="[backGround,fontSize]">{{message}}</h2>
<!-- ■也可以调用方法的方式返回数组的形式进行绑定-->
<h2 :style="getStyle2()">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "vue app",
finalSize: "50px",
finalNum: 50,
color: 'red',
backGround: {backgroundColor: "red"},
fontSize: {fontSize: "50px"},
},
methods: {
getStyle: function () {
return {fontSize: this.finalSize}
},
getStyle2: function () {
return [{backgroundColor: "red"},{fontSize: "50px"}]
}
}
});
</script>
</body>
</html>
效果
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
10
0- 0
已为社区贡献3条内容
所有评论(0)