1.基本使用方式
mustache文法隻能用于dom中，而不能用于屬性中，但當我們希望dom的某些屬性也動态綁定的時候，這時候就用到了v-bind文法了
- 比如動态綁定a元素的href屬性
- 比如動态綁定img元素的src屬性
這個時候，我們可以使用v-bind指令動态綁定屬性。文法糖（縮寫）:冒号，廢話不多說，上代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--錯誤的文法，這裡不可以使用mustache文法-->
<!-- <img src="{{url}}" /> -->
<!-- 正确的做法：使用v-bind指令 -->
<img v-bind:src="imgUrl"/>
<a v-bind:href="url" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >百度一下</a>
<!-- 文法糖寫法，直接冒号 -->
<img :src="imgUrl"/>
<a :href="url" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >百度一下</a>
</div>
</body>
</html>
<script>
const app = new Vue({
el:"#app",
data:{
imgUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbbsimg.91quka.cn%2F2019022011045633.jpg&refer=http%3A%2F%2Fbbsimg.91quka.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625142846&t=d1cf2cc42f41044ef74e45c6d7d5e3de",
url:"http://www.baidu.com"
},
methods:{
}
});
</script>
頁面結果：
綁定其他屬性都是類似的，這就是v-bind的基本使用方式。
2.動态綁定class
動态綁定class和基本使用一樣，可以直接使用：進行綁定。
除了普通的綁定方式，我們也可以綁定對象，綁定對象傳遞參數一般為：
{類名:布爾值,類名:布爾值······}
當布爾值為true的時候，類名就會加載到目前dom中；當布爾值為false的時候，類名就不會加載到dom中，下面上代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style>
.active{
color: red;
}
.inline{
color: green;
}
</style>
<body>
<div id="app">
<!-- 普通的動态綁定方式 -->
<h2 :class="active">{{message}}</h2>
<!--解釋一下，動态綁定class除了傳遞普通值，也可以傳遞對象，一般key為類名，value為布爾值，
當value為true的時候，類名會被加載到目前dom中-->
<!-- <h2 :class="{key1:value1,key2:value2}"></h2> -->
<!-- <h2 :class="{類名1:true,類名2:false}"></h2> -->
<h2 :class="{active:isActive,inline:isInline}">{{message}}</h2>
</div>
</body>
</html>
<script>
const app = new Vue({
el:"#app",
data:{
message:"娃兒瑞",
active:'active',
isActive:false,
isInline:true
},
methods:{
}
});
</script>
結果如下，第一個h2隻有active，第二個隻有inline：
