当前位置：网站首页>v-if条件判断及v-show

v-if条件判断及v-show

2022-08-03 00:11:00 【呦呦鹿鸣[email protected]】

一、v-if 的基本使用

v-if用于条件判断，判断Dom元素是否显示。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h2 v-if="isFlag">我们是勇于战斗的</h2>
			
			<h3 v-if="age<18">我们是青少年</h3>
			<h3 v-else-if="age<60">我们是18到60的青壮年</h3>
			<h3 v-else>大于60岁我们是老年人</h3>
		</div>
		<script>
			const vm = new Vue({
				el:'#app',
				data(){
					return {
						isFlag:false,
						age:70
					}
				}
			})
			
		</script>
	</body>
</html>

输入各不同年龄段效果：

当isFlag 为false时—隐藏DOM元素

二、v-if 的demo

在登录网站是经常可以选择使用账户名或者邮箱登录的切换按钮。要求点击按钮切换登录方式。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<span v-if="isUser">
<label for="username">用户账号</label>
<input type="text" id="username" placeholder="请输入用户名" key="username">
</span>
<span v-else>
<label for="email">用户邮箱</label>
<input type="text" id="email" placeholder="请输入用户邮箱" key="email">
</span>
<button type="button" @click="isUser=!isUser">切换</button>
</div>
<script>
const vm = new Vue({
el: '#app',
data() {
return {
isUser: true
}
}
})
</script>
</body>
</html>

使用v-if和v-else选择渲染指定的Dom，点击按钮对isUser变量取反。

这里有个小问题，如果已经输入了账号了，此时想切换到邮箱输入，输入框未自己清空。

这里需要了解一下vue底层操作，此时input输入框值被复用了。

vue在进行DOM渲染是，处于性能考虑，会复用已经存在的元素，而不是每次都创建新的DOM元素。
在上面demo中，Vue内部发现原来的input元素不再使用，所以直接将其映射对应虚拟DOM，用来复用。
如果不希望出现类似复用问题，可以给对应的dom元素加上key值，并保证key不同。

<input type="text" id="username" placeholder="请输入用户名" key="username">
<input type="text" id="email" placeholder="请输入用户邮箱" key="email">

三、v-show 以及v-if 的区别

v-show 和 v-if 都有按需控制DOM的显示与隐藏

实现原理：

v-if 指令会动态的创建或移除DOM元素，从而控制元素在页面上的显示与隐藏

v-show 指令会动态为元素添加或移除style="dispaly:none;"样式，从而控制元素的显示与隐藏

区别：

v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此：

如果需要非常频繁地切换，则使用v-show较好
如果在运行时条件很少改变，则使用v-if较好

<!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>Document</title>
</head>
<body>
  <div id="app">
    <h2 v-show="isFlag">v-show只是操作元素的style属性display</h2>
    <h2 v-if="isFlag">v-if是新增和删除dom元素</h2>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        isFlag:true
      }
    })
  </script>
</body>
</html>

v-if 在首次渲染的时候，如果条件为假，什么也不操作，页面当作没有这些元素。当条件为真的时候，开始局部编译，动态的向DOM元素里面添加元素。当条件从真变为假的时候，开始局部编译，卸载这些元素，也就是删除。

v-show 不管条件是真还是假，第一次渲染的时候都会编译出来，也就是标签都会添加到DOM中。之后切换的时候，通过display: none;样式来显示隐藏元素。可以说只是改变css的样式，几乎不会影响什么性能。

四、v-for 中的key

<!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>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <p v-for="(item,index) in list" :key="item.id">{
   {item.name}}-{
   {item.age}}
            <input type="text">
        </p>
        <button type="button" @click="add">添加</button>
    </div>
    <script>
        var vm=new Vue({
            el:'#app',
            data(){
                return {
                    list:[
                        {
                            id:01,
                            name:'张三',
                            age:20
                        },
                        {
                            id:02,
                            name:'李四',
                            age:30
                        },
                        {
                            id:03,
                            name:'王五',
                            age:40
                        }
                    ]
                }
            },
            methods:{
                add(){
                    this.list.unshift({
                        id:04,
                        name:'赵六',
                        age:50
                    })
                }
            }
        })
    </script>
</body>
</html>

若用 index

<div id="app">
<p v-for="(item,index) in list" :key="index">{ {item.name}}-{ {item.age}}
<input type="text">
</p>
<button type="button" @click="add">添加</button>
</div>

总结：

key的作用主要就是为了高效的更新虚拟DOM，使用key值，它会基于key的变化重新排列元素顺序，并且会移除key不存在的元素。它也可以用于强制替换元素/组件而不是重复的使用它。

为何不推荐index作为key值:

当以数组为下标的index作为key值时，其中一个元素(例如增删改查)发生了变化就有可能导致所有的元素的key值发生改变
diff算法时比较同级之间的不同，以key来进行关联，当对数组进行下标的变换时，比如删除第一条数据，那么以后所有的index都会发生改变，那么key自然也跟着全部发生改变，所以index作为key值是不稳定的，而这种不稳定性有可能导致性能的浪费，导致diff无法关联起上一次一样的数据。因此，能不使用index作为key就不使用index。

diff算法相关内容：https://www.jianshu.com/p/32dc90014589

原网站

版权声明
本文为[呦呦鹿鸣[email protected]]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_53841687/article/details/126124236