v-bind
- 属性和数据进行绑定
- 举例： 表单的value属性和一个数据绑定
- 说法： 绑定一个数据在某一个属性身上
<!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> 指令 </title>
<style>
.size{
width: 100px;
height: 100px;
}
.bg{
background: red;
}
.color{
background: blue;
}
</style>
</head>
<body>
<div id="app">
<h3> v-bind 绑定 </h3>
<input type="text" v-bind:value = "msg">
<input type="text" :value = "msg">
<hr>
<h4> 对象 </h4>
<p style = "width: 100px;height: 100px;background: green;"></p>
<p :style = "{width: '100px',height: '100px',background: 'blue'}"></p>
<p :style = "{width: w,height: h,background: backg}"></p>
<h4> 数组写法 </h4>
<p :style = "[{width: '100px',height: '100px'},{background: 'pink'}]"></p>
<p :style = "[ styleObj,styleColor ]"></p>
<hr>
<h3> 绑定类名 </h3>
<h4> 对象 </h4>
<p class = "size bg"> </p>
<p :class = "{size: true,bg: true}"></p>
<p :class = "{[size]: true,[bg]: true}"></p>
<hr>
<h4> 数组 </h4>
<p :class = "['size','bg']"></p>
<p :class = "[size,bg]"></p>
<p :class = "{[size]: true,[bg]: true}"></p>
<p :class = "[ size,bg ]"></p>
<p :class = "{ [size]: flag,[bg]: flag}" ></p>
<p :class = "[ size, flag?bg:color ]"></p>
<p :class = "[ size, flag && bg || color ]"></p>
<p class = "text" :class = [size,bg]></p>
<h4> v-bind 可以绑定任意一个dom身上的属性 </h4>
<img :src="imgUrl" alt="">
<hr>
</div>
</body>
<script src="../../lib/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
imgUrl: 'https://www.baidu.com/img/bd_logo1.png',
msg: 'hello everyone',
size: 'size',
bg: 'bg',
flag: true,
color: 'color',
w: '100px',
h: '100px',
backg: 'blue',
styleObj: {
width: '100px',
height: '100px'
},
styleColor: {
background: 'yellow'
}
}
})
var a = 1
var obj = {
a: 2
}
</script>
</html>
<!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> 指令 </title>
</head>
<body>
<div id="app">
<h3> v-model 双向数据绑定 </h3>
<input type="text" v-model = "msg">
</div>
</body>
<script src="../../lib/vue.js"></script>
<script>
/*
*/
new Vue({
el: '#app',
data: {
msg: 'happy everyday'
}
})
</script>
</html>