萌框架vue（二）——系統指令v-bind
阿新 • • 發佈：2018-12-18
我去飯館吃飯，指著選單上的地三鮮說：“我要第2個。”
服務員有點蒙；“西紅柿炒雞蛋？”
我：“第2個，地三鮮。”
服務員：“那是第3個吧。。。”
我：“我是程式猿。”
服務員：“那應該是第10個。”
我…
0、 系統指令v-bind
v-bind 作用：可以給元素動態繫結屬性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <!-- 基本用法1 --> <a v-bind:href="url">去百度</a> <!-- 基本用法2 --> <a v-bind:href="'index.php?id=' + id">引數</a> <!-- 簡寫 --> <a :href="url" v-bind:id="id">去百度</a> </div> </body> <script src="./vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { msg: 'message', url: 'http://www.baidu.com', id: 100 } }); </script> </html>
v-bind: 可以給任意屬性繫結值，但有兩個比較特殊： class / style
1、v-bind給class繫結物件
<style> .color { color: red } .font { font-size: 40px; } </style> <body> <div id="app"> <a v-bind:href="url">百度一下</a> //使用 v-bind 給元素繫結一個名類 <p :class="classColor">內容</p> //使用 v-bind 給元素繫結多個名類： 注意： v-bind 無法給class 直接繫結多個類名 <p :class="classColor classFont">內容</p> //報錯 <h1>使用 v-bind 通過繫結物件的形式給元素繫結多個類名</h1> <p :class="{color: colorValue ,font: fontValue}">內容</p> </div> </body> <script src="./vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { msg: 'message', url: 'http://www.baidu.com', classColor: 'color', classFont: 'font', colorValue: false,//false表示不執行 fontValue: true//true表示執行 }, }); </script>
2、v-bind給class繫結陣列
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .color { color: red; } .font { font-size: 40px; } </style> </head> <body> <div id="app"> <h1>使用 v-bind 通過陣列給 class 繫結多個類名</h1> <h3>語法1</h3> <p :class="[a, b]">內容</p> <h3>語法2</h3> <p :class="[a2, b2]">內容</p> </div> </body> <script src="./vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { msg: 'message', a: 'color', b: 'font', a2: { color: true }, b2: { font: false } }, }); </script> </html>
3、v-bind給style繫結物件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<p :style="{ color: colorVal, fontSize: fontVal }">內容</p>
</div>
</body>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'message',
colorVal: 'red',
fontVal: '40px'
},
});
</script>
</html>
4、v-bind給style繫結陣列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<p :style="[a, b]">內容</p>
</div>
</body>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'message',
a: {
color: 'red'
},
b: {
fontSize: '40px'
}
},
});
</script>
</html>