指令
v-text
- 标签内容显示js变量对应的值
<div id="box">
<span v-text="a"></span>
<!-- 等同于 -->
{{a}}
</div>
<script>
let vm = new Vue({
el: '#box',
data: {
a: 111
}
})
</script>
v-html
- 让HTML渲染成页面
<div id="box">
<span v-html="a"></span>
</div>
<script>
let vm = new Vue({
el: '#box',
data: {
a: '<a href="https://www.baidu.com">百度一下 你就知道</a>'
}
})
</script>
v-show
- 放1个布尔值：为真 标签就显示；为假 标签就不显示
- 隐藏标签：dispaly:none
<div id="box">
<span v-show="isShow"></span>
</div>
<script>
let vm = new Vue({
el: '#box',
data: {
isShow: true,
// isShow: false,
},
})
</script>
v-if
- 当
v-if元素被触发，元素及其所包含的指令/组件都会销毁和重构。如果初始条件是假，那么其内部的内容根本都不会被渲染。
<div id="box">
<span v-if="showIf"></span>
</div>
<script>
let vm = new Vue({
el: '#box',
data: {
showIf: true,
// showIf: false,
},
})
</script>
v-else
- 兄弟元素必须有
v-if或v-else-if
<div id="box">
<div v-if="num > 4">
A
</div>
<div v-else>
B
</div>
</div>
<script>
let vm = new Vue({
el: '#box',
data: {
num:5
},
})
</script>
v-else-if
- 兄弟元素必须有
v-if或v-else-if
<div id="box">
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else>
其他
</div>
</div>
<script>
let vm = new Vue({
el: '#box',
data: {
type: 5
},
})
</script>
v-for
- 遍历数组(列表)、对象(字典)、数字
- 数组的
index和value是反的 - 对象的
key和value也是反的
<div id="box">
<div v-for="item in lists">
{{ item }}
</div>
<hr>
<div v-for="(value,index) in dicts">
{{ index }}:{{ value }}
</div>
<hr>
<div v-for="item in objects">
{{ item.name }}:{{ item.age }}
</div>
</div>
<script>
let vm = new Vue({
el: '#box',
data: {
lists: [1, 2, 3],
dicts: {name: 'qcc', age: 24},
objects: [
{name: 'qcc', age: 23},
{name: 'tom', age: 15,}
]
},
})
</script>
v-on
-
缩写：
@ -
给元素绑定事件监听器。
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue/vue2.js"></script>
</head>
<body>
<div id="app">
<h3>点击按钮显示方块，再点击就不显示</h3>
<button @click="handleClick()">点我</button>
<div v-if="showIf" style="height: 200px;width: 200px;background-color: blue"></div>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
showIf: true,
},
methods: {
handleClick() {
this.showIf = !this.showIf
}
}
})
</script>
</html>
v-bind
- 缩写：
: - 动态的绑定一个或多个 attribute，也可以是组件的 prop。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue/vue2.js"></script>
</head>
<body>
<div id="app">
<img src="img/A.jpg" :height="h" :width="w">
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
h: 300,
w: 450,
}
})
</script>
</html>