条件渲染: v-if/template
<div id="app">
<h1>v-show: display: none</h1>
<div v-show="false">yes</div>
<!--<div v-else>no</div>-->
<h1>v-for: 判断1</h1>
<div v-if="false">yes</div>
<div v-else>no</div>
<h1>判断2</h1>
<div v-if="msg">yes</div>
<div v-else>no</div>
<h1>判断3: 不能这样写, 正确做法是v-if和v-else之间无其他内容</h1>
<div v-if="msg">yes</div>
<div>somethings</div>
<div v-else>no</div>
<h1>判断4: 如果v-if和v-else必须要有其他内容: 建议template实现</h1>
<div v-if="true">
<div>yes</div>
<div>somethings</div>
</div>
<div v-else>no</div>
<h1>判断5</h1>
<template v-if="true">
<div>yes</div>
<div>somethings</div>
</template>
<div v-else>no</div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
msg: false,
}
})
</script>
自定义指令directives
an official order or instruction
- vue有 1,模板类 2,表单类 3,事件类的各种指令 4.还可以自定义指令
<div id="app">
<h1>自定义指令: directives</h1>
<input type="text" v-focus>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
msg: "maotai",
},
directives: {
focus: {
inserted: function (el) {
el.focus();
}
}
}
})
</script>