v-bind基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--錯誤的做法：這裏不可以使用mustache語法 -->
<!--<img src='{{imgURL}}' alt="" -->
<!--正確的做法：使用v-bind指令 -->
<img v-bind:src="imgURL" alt="">
<a v-bind:href='aHref'>百度一下</a>
<!--語法糖的寫法 -->
<img :src="imgURL" alt="">
<a :href='aHref'>百度一下</a>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello vue',
imgURL: 'https://cdn.jsdelivr.net/gh/xdr630/images/1534065512452.jpeg',
aHref: 'https://www.baidu.com'
}
})
</script>
</body>
</html>
這裏的可以這樣寫 v-bind = :
v-bind綁定class（一）
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.active{
color: red;
}
</style>
</head>
<body>
<div id="app">
<!-- <h2 class="active">{{message}}</h2>-->
<!-- <h2 :class="active">{{message}}</h2>-->
<!-- <h2 v-bind:class="{key1,value1,key2:value2}">{{message}}</h2> -->
<!-- <h2 v-bind:class="{類名1:true,類名2:boolean}">{{message}}</h2>-->
<h2 class="title" 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: 'hello vue',
active: 'active',
isActive: true,
isLine: true
},
methods: {
btnClick: function () {
this.isActive = !this.isActive
}
}
})
</script>
</body>
</html>
點擊按鈕變換顏色
