文章目录
条件指令-v-if/v-else-if/v-else
内容
01、关于Vue的指令v-if/v-else-if/v-else/v-show
02、关于Vue的指令v-once/v-pre
03、关于Vue的指令v-model
04、实现表格的复选，反选，全选功能
05、实现弹出层的隐藏和显示的功能
07、js数组相关操作push unshift splice 等
概述
v-if是做逻辑条件判断的指
案例
在开发中，需求：如果性别是：0 女 1 男 2 保密
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>条件指令-v-if/v-else-if/v-else</title>
</head>
<body>
<div id="app">
<p v-if="gender == 2">保密</p>
<p v-if="gender == 1">男</p>
<p v-if="gender == 0">女</p>
<hr>
<p v-if="gender == 0">女</p>
<p v-else-if="gender == 1">男</p>
<p v-else>保密</p>
</div>
<script src="js/vue.global.js"></script>
<script>
var vm = Vue.createApp({
data() {
return {
gender: 0 // 0 女 1 男
}
}
}).mount("#app");
</script>
</body>
</html>
注意:
<p v-if="gender == 0">女</p>
<p v-else-if="gender == 1">男</p>
<p v-else>保密</p>
上面会存在一个问题，不能在指令中间插入别元素，否则就断层。比如：
<p v-if="gender == 0">女</p>
<span></span>
<p v-else-if="gender == 1">男</p>
<span></span>
<p v-else>保密</p>
隐藏和显示的指令-v-show
https://v3.cn.vuejs.org/guide/conditional.html#v-else-if
v-show
另一个用于条件性展示元素的选项是 v-show 指令。用法大致一样：
<h1 v-show="ok">Hello!</h1>
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 display CSS property。
注意，v-show 不支持
v-if vs v-show
- v-if 是“真正”的条件渲染，因为它会确保在切换过程中，条件块内的事件监听器和子组件适当地被销毁和重建。
- v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
- 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
- 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
建议
- 刚开始尽量使用v-if，做逻辑判断：v-if 做隐藏显示：v-show
- 如果觉得不正确，考虑直接改成v-show
v-show做不到的事情
<p v-if="gender == 0">女</p>
<span></span>
<p v-else-if="gender == 1">男</p>
<span></span>
<p v-else>保密</p>
其他指令-v-pre/v-once（了解）
在整个的程序开发中。你几乎用不到
v-once
代表插值表达式，或者任何指令只会渲染一次。后续data发生变更，不会在进行同步。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>17、其他指令-v-once.html</title>
</head>
<body>
<div id="app">
<!-- 单个元素 -->
<span v-once>This will never change: {
{msg}}</span>
<!-- 有子元素 -->
<div v-once>
<h1>comment</h1>
<p>{
{msg}}</p>
</div>
<button @click="changeMsg">改变msg</button>
</div>
<script src="js/vue.global.js"></script>
<script>
var vm = Vue.createApp({
created(){
},
data() {
return {
msg:"Hello Vue3.x"
}
},
methods:{
changeMsg(){
this.msg = "Hi Vue3.x";
}
}
}).mount("#app");
</script>
</body>
</html>
一旦被v-once修饰的指令，只会和data同步一次，后续的data的变更不会在进行同步v-once的标签元素。
v-pre
如果被v-pre修饰的元素，直接不会和data替换。原样输出插值表达式
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>17、其他指令-v-once.html</title>
</head>
<body>
<div id="app">
<!-- 单个元素 -->
<span v-pre>This will never change: {
{msg}}</span>
<!-- 有子元素 -->
<div v-pre>
<h1>comment</h1>
<p>{
{msg}}</p>
</div>
<button @click="changeMsg">改变msg</button>
</div>
<script src="js/vue.global.js"></script>
<script>
var vm = Vue.createApp({
created(){
},
data() {
return {
msg:"Hello Vue3.x"
}
},
methods:{
changeMsg(){
this.msg = "Hi Vue3.x";
}
}
}).mount("#app");
</script>
</body>
</html>