Vue之v-bind快速学习
vue v-bind学习
·
目录
-
1、v-bind的基本使用
-
2、v-bind动态绑定class(对象)
-
3、v-bind动态绑定class(数组)
-
4、v-bind动态绑定style(对象)
-
5、v-bind动态绑定style(数组)
1、v-bind的基本使用
- 使用该标签可以动态绑定,不写死内容,在需要绑定的标签前加上v-bind即可实现,语法糖为为引号
:
。 - 不加该标签会原封不动的进行输出,并不会被vue解析。
<div id="app">
<!--普通写法-->
<img v-bind:src="message" alt="" srcset="">
<a v-bind:href="url">百度一下</a>
<br/>
<!--语法糖(简写标签)写法-->
<img :src="message" alt="" srcset="">
<a :href="url">百度一下</a>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'https://i1.hdslb.com/bfs/face/c850c18ae6b507d0ef34837f53a51090b6a7451f.jpg@68w_68h.webp',
url: 'https://www.baidu.com'
},
methods: {}
});
2、v-bind动态绑定class(对象)
通过v-bind可以动态设置class的增加和删除,更加的灵活,不会要向jquery那样先获取DOM在进行增加或删除class。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第七次</title>
<script src="../js/vue.js"></script>
<style>
.active{
color: red;
}
</style>
</head>
<body>
<div id="app">
<!--第一个class没有使用动态绑定,则不能直接删除,两个class会合并处理-->
<h2 class="NotChange" :class="{active: isActive,line: isLine}">{{message}}</h2>
<button @click="changeColor">点击变色</button>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello World!',
isActive: true,
isLine: true
},
methods: {
changeColor: function(){
this.isActive = !this.isActive;
}
}
});
</script>
</body>
</html>
还可以在methods内使用getClasses返回。
<div id="app">
<!-- <h2 class="NotChange" :class="{active: isActive,line: isLine}">{{message}}</h2> -->
<h2 class="NotChange" :class="getClasses()">{{message}}</h2>
<button @click="changeColor">点击变色</button>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello World!',
isActive: true,
isLine: true
},
methods: {
changeColor: function(){
this.isActive = !this.isActive;
},getClasses: function(){
return {active: this.isActive,line: this.isLine};
}
}
});
</script>
3、v-bind动态绑定class(数组)
- 使用[类名A,类名B]传入多个类名。
- 使用[‘字符串A’,‘字符串B’]传入多个字符串。
- 在methods内使用getClasses()返回上述两种。
<div id="app">
<h2 class="NotChange" :class="['active','line']">{{message}}</h2>
<h2 class="NotChange" :class="[isActive,isLine]">{{message}}</h2>
<h2 class="NotChange" :class="getClasses()">{{message}}</h2>
<button @click="changeColor">点击变色</button>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello World!',
isActive: 'active',
isLine: 'line'
},
methods: {
changeColor: function(){
this.isActive = !this.isActive;
},getClasses: function(){
return [this.isActive,this.isLine];
}
}
});
</script>
4、v-bind动态绑定style(对象)
- 使用方式为{key(属性名),value(值)}
- key可以使用驼峰命名法(font-size==>fontSize),不使用则需要加上单引号,否则 - 会转义。
- 可以将动态style抽离,使用一个方法返回。
<div id="app">
<!-- <h2 :style="{fontSize:finalSize,color:finalColor}">{{message}}</h2> -->
<h2 :style="{fontSize:finalSize + 'px',color:finalColor}">{{message}}</h2>
<h2 :style="{'font-size':finalSize + 'px',color:finalColor}">{{message}}</h2>
<h2 :style="getStyle()">{{message}}</h2>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
message: '你好世界!',
// finalSize:'50px',
finalSize:50,
finalColor:'yellow',
},
methods: {
getStyle:function(){
return {'font-size':this.finalSize + 'px',color:this.finalColor};
}
}
});
</script>
5、v-bind动态绑定style(数组)
- 多个对象的集合
<div id="app">
<h2 :style="[style1,style2]">{{message}}</h2>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
message: '你好',
style1:{fontSize:'40px'},
style2:{backgroundColor:'green'}
},
methods: {}
});
</script>
更多推荐
已为社区贡献1条内容
所有评论(0)