本章为绑定属性
一、v-bind
1.v-bind介绍
2.v-bind基础
代码如下:
<div id='app'>
<!-- 错误写法:这里不可以写mustache语法 -->
<!-- <img src="{{imgUrl}}" alt=""> -->
<!-- 正确做法:使用v-bind指令 -->
<img v-bind:src="imgUrl" alt="">
<a v-bind:href="aHref">百度一下</a>
</div>
<script src='./js/vue.js'></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好',
imgUrl: 'https://cn.vuejs.org/images/logo.png',
aHref: 'http://baidu.com'
}
})
</script>
3.v-bind语法糖
4.v-bind绑定class
①.v-bind动态绑定class(对象语法)
代码如下:
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<style>
.active {
color: red;
}
</style>
</head>
<body>
<div id='app'>
<!-- <h2 class="active">{{message}}</h2>
<h2 :class="active">{{message}}</h2> -->
<!-- :class="{类名:布尔值}",为true添加,false不添加 -->
<h2 :class="{active: isActive, line: isLine}">{{message}}</h2>
<button v-on:click="btnClick">按钮</button>
</div>
<script src='./js/vue.js'></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
active: 'active',
isActive: true,
isLine: false
},
methods: {
btnClick() {
this.isActive = !this.isActive
}
}
})
</script>
</body>
②.v-bind动态绑定class(数组语法)
代码如下:
<div id='app'>
<h2 :class="[active, line]">{{message}}</h2>
<h2 :class="getClasses()">{{message}}</h2>
</div>
<script src='./js/vue.js'></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好',
active: 'aaaaa',
line: 'bbbbb'
},
methods: {
getClasses() {
return [this.active, this.line]
}
}
})
</script>
5.v-bind绑定style
①.v-bind绑定style-【对象语法】
代码如下:
<div id='app'>
<!-- {key(属性名), value(属性值)} -->
<!-- 必须加上单引号,否则被当做变量解析 -->
<h2 :style="{fontSize: '20px'}">{{message}}</h2>
<!-- finalSize被当做一个变量来使用 -->
<h2 :style="{fontSize: finalSize, backgroundColor: finalColor}">{{message}}</h2>
<h2 :style="getStyles()">{{message}}</h2>
</div>
<script src='./js/vue.js'></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好',
finalSize: '50px',
finalColor: 'red'
},
methods: {
getStyles() {
return {fontSize: this.finalSize, backgroundColor: this.finalColor}
}
}
})
</script>
效果如下:
②.v-bind绑定style-【数组语法】
代码如下:
<div id='app'>
<h2 :style="[baseStyle, baseStyle1]">{{message}}</h2>
</div>
<script src='./js/vue.js'></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好',
baseStyle: {backgroundColor: 'red'},
baseStyle1: {fontSize: '50px'}
}
})
</script>
效果如下:
内容持续更新中…
lvan学习笔记-文章内容仅个人观点
2020.5.30