2. v-bind
单向数据绑定，它是为标签里的某个属性绑定值用的
(1) 基本用法：
<body>
<div id="root">
单向数据绑定：<input type="text" v-bind:value="aname">
</div>
<script>
const vm = new Vue({
el: '#root',
data: {
aname:'进击的Giser'
},
});
</script>
</body>
(2) 简写形式：
v-bind:可以简写为:，举例：v-bind:href='xxx'可以简写为：:href='xxx'
3. v-model
双向数据绑定，v-model只能应用在表单类元素（如：input、select等）
(1) 基本用法：
<body>
<div id="root">
双向数据绑定：<input type="text" v-model:value="aname">
<!-- 下边一行代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 -->
<!-- <h2 v-model:x="name">你好啊</h2> -->
</div>
<script>
const vm = new Vue({
el: '#root',
data: {
aname:'学编程的Giser'
},
});
</script>
</body>
(2) 简写形式：
v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。
4. v-for
遍历
(1) 遍历数组：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>test</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1 v-for="(i,index) in arr">每一项：{{i}}--索引值：{{index}}</h1>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
arr: ['学', '编程', '的', 'GISer'],
},
});
</script>
</body>
</html>
(2) 遍历对象：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>test</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1 v-for="(i,index) in arr">键：{{i}}--值：{{index}}</h1>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
arr: {
name: 'Dapan',
age: 3,
sex: 'boy',
},
},
});
</script>
</body>
</html>
(3) 迭代数字：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>test</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1 v-for="(i,index) in 6">每一项：{{i}}--索引：{{index}}</h1>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {},
});
</script>
</body>
</html>
5. v-show
条件渲染，
v-show指令通过改变元素的 css 属性（display）来决定元素是显示还是隐藏。v-show等于false时,相当于设置了样式的display为none
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>test</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>下边测试v-show：</h1>
<h3 v-show="showTest">v-show = true,故这个元素显示出来了</h3>
<button @click="showTest = true">点击按钮，showTest变为true</button>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
showTest: false,
},
});
</script>
</body>
</html>
6. v-if
条件渲染，与
v-show类似，唯一不同的是，当v-if = false的时候，直接删掉DOM结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>test</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>下边测试v-if：</h1>
<h3 v-if="ifTest">v-if = true,故这个元素显示出来了</h3>
<button @click="ifTest = true">点击按钮，ifTest变为true</button>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
ifTest: false,
},
});
</script>
</body>
</html>
7. v-else/v-else-if
v-else-if: 和if语句中else if的用法相同
v-else: 当v-if不成立时执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>test</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<div v-if="n==1">{{a}}</div>
<div v-else-if="n==2">{{b}}</div>
<div v-else-if="n==3">{{c}}</div>
<div v-else-if="n==4">{{d}}</div>
<div v-else style="font-weight: 700">{{e}}</div>
<button @click="n++">点我n加一</button>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
n: 0,
a: '欢迎',
b: '关注',
c: '公众号',
d: '学编程的GISer',
e: '欢迎关注公众号:学编程的GISer',
},
});
</script>
</body>
</html>
