1、v-bind的基本使用
<div id="app">
<img v-bind:src="imageURL" alt="">
<a v-bind:href="aHref">百度一下</a>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message:'你好呀',
imageURL:'https://img13.360buyimg.com/seckillcms/s140x140_jfs/' +
't1/202808/13/13422/133058/617e3539Ef517623b/6f5f61161bcdc97f.jpg.webp'
}
})
</script>
2、v-bind的语法糖（简写方式）
<div id="app">
<img :src="imageURL" alt="">
<a :href="aHref">百度一下</a>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message:'你好呀',
imageURL:'https://img13.360buyimg.com/seckillcms/s140x140_jfs/' +
't1/202808/13/13422/133058/617e3539Ef517623b/6f5f61161bcdc97f.jpg.webp',
aHref: 'http://www.baidu.com'
}
})
</script>
3、v-bind动态绑定class(对象语法)
案例1：
<div id="app">
<h2 v-bind:class="{active: isActive, line:isLine}">{
{
message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message:'你好呀',
isActive: true,
isLine: false
}
})
</script>
案例2：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.active{
color:red
}
</style>
</head>
<body>
<div id="app">
<h2 v-bind: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:'你好呀',
isActive: true,
isLine: false
},
methods: {
btnClick:function(){
this.isActive = !this.isActive
}
}
})
</script>
</body>
