Vue学习(三)-v-bind指令学习
二，v-bind动态绑定属性
-
v-bind语法
-
动态绑定一个标签的属性
-
只要一个属性被加 v-bind，该属性的值就会被当成模板变量解析
<img v-bind:src="img1" alt=""> <script> var app = new Vue({ el: '#app', data: { img1: 'imgs/1.jpg' }, }) script>
语法糖写法
<a v-bind:href="url">...a> <a :href="url">...a> -
v-bind对象语法
class 后面填写的是一个对象
用法一：绑定一个类，根据active的值来选择留下还是删除
<p :class="{active: true}">你好p>
用法二：传入多个值
<p :class="{active: true, big: false}">你好p>
用法三：和class定义的类名不冲突，三个类名会合并
<p class="bgc" :class="{active: true, big: true}">你好p>
用法四：把类名放在一个函数中进行计算后返回
<p class="bgc" :class="getAttr()">你好p>
methods: {
getAttr: function() {
return {
active: this.isActive,
big: this.isBig
}
}
}
v-bind数组语法
class 后面填写一个 数组
-
示例
<div id="app">
<p class="bgc" :class="[active, big]">你好p>
<p class="bgc" :class="getAttr()">你好p>
div>
<script>
var app = new Vue({
el: '#app',
data: {
img1: 'imgs/1.jpg',
active: 'active',
big: 'big',
},
methods: {
getAttr: function() {
return [this.active, this.big]
}
}
})
script>
v-bind动态绑定Style
我们可以使用 v-bind:style 来绑定一些CSS样式
对象绑定
<div id="app">
<section :style="{
fontSize: font1}"> {
{message}} section>
<section :style="{
fontSize: font2 + 'px'}"> {
{message}} section>
<section :style="myStyle"> {
{message}} section>
div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
font1: '50px',
font2: 60,
myStyle: {
color: 'red',
fontSize: '70px'
}
}
})
数组绑定
<div id="app">
<section :style="[baseStyle, baseStyle1]"> {
{
message}} </section>
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
baseStyle: {
color: 'gold',
backgroundColor: 'black',
fontSize: '50px'
},
baseStyle1: {
width: '200px'
}
}
})
案例1：点击切换Class
<style>
.active {
color: red;
}
.big {
font-size: 20px;
}
.bgc {
background-color: aqua;
}
style>
head>
<body>
<div id="app">
<p class="bgc" :class="{active: isActive, big: isBig}">你好p>
<button @click="btnClick">按钮button>
div>
<script>
var app = new Vue({
el: '#app',
data: {
img1: 'imgs/1.jpg',
isActive: true,
isBig: true,
},
methods: {
btnClick: function() {
this.isActive = !this.isActive;
this.isBig = !this.isBig;
}
}
})
script>
body>
