14-v-bind
<body>
<div id="app">
<h2>Mamba :{{name}}</h2>
<img v-bind:src="imgURL" alt="">
<a v-bind:href="aHref" alt="">百度一下</a>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
name: 'Kobe Bryant',
imgURL:'https://bkimg.cdn.bcebos.com/pic/83025aafa40f4bfb4f019c66044f78f0f736182a?x-bce-process=image/resize,m_lfit,w_480,limit_1',
aHref: 'http://www.baidu.com'
}
})
</script>
</body>
15-v-bind动态绑定class（对象语法）
<style>
.active{
color: #f40;
}
.line{
font-size: xx-large;
}
</style>
<body>
<div id="app">
<h2 class='title' v-bind:class="{active: isActive, line: isLine}">{{name}}</h2>
<button v-on:click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
name: 'Kobe Bryant',
isActive: true,
isLine: true
},
methods: {
btnClick: function(){
this.isActive = !this.isActive;
this.isLine = !this.isLine;
}
}
})
</script>
</body>
16-v-bind动态绑定class（数组语法）- 用的少
用法四methods示例：
<body>
<div id="app">
<!-- <h2 class='title' v-bind:class="{active: isActive, line: isLine}">{{name}}</h2> -->
<h2 class='title' :class="getClasses()">{{name}}</h2>
<button v-on:click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
name: 'Kobe Bryant',
isActive: true,
isLine: true
},
methods: {
btnClick: function(){
this.isActive = !this.isActive;
this.isLine = !this.isLine;
},
getClasses: function(){
return {active: this.isActive, line: this.isLine}
}
}
})
</script>
</body>
<body>
<div id="app">
<h2 class='title' :class="['active', 'line']">{{name}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
name: 'Kobe Bryant',
}
})
</script>
</body>作业：
18-19-v-bind动态绑定style
<body>
<div id="app">
<h2 :style="{fontSize: finalSize + 'px', color: finalColor}">{{name}}</h2>
<h2 :style="getStyles()">{{name}}</h2> // 如果觉得上面太长的话，可以这样绑定
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
name: 'Kobe Bryant',
finalSize: 100,
finalColor: 'red'
},
methods: {
getStyles: function(){
return {fontSize: this.finalSize + 'px', color: this.finalColor}
}
}
})
</script>
</body>数组
<body>
<div id="app">
<h2 :style="[baseStyle, baseStyle1]">{{name}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
name: 'Kobe Bryant',
baseStyle: {color: 'red'},
baseStyle1: {fontSize: '100px'}
},
})
</script>
</body>