vue的if,vue v-if用法
本文主要介绍vue条件渲染v-if和v-show。在模板中，可以根据条件进行渲染。通过组合v-if、v-else-if和v-else来实现条件。有时我们希望在一个条件中加载多个html元素，所以可以通过模板元素来实现。我们来看看具体的实现。
目录
1，v-if2，在模板上使用v-if3，使用关键字v-show管理可重用元素4
4.1 v中频与v显示
1、v-if
在模板中，可以根据条件进行渲染。条件是通过组合v-if、v-else-if和v-else来实现的。
示例代码如下：
div id=应用程序
今天去公园吧！/p
今天去看电影吧！/p
否则今天哪儿也去不了！/p
/div
脚本
让vm=new Vue({
埃尔： #app ，
数据：{
天气：“太阳”
}
});
/脚本
2、在template上使用v-if
有时我们希望在一个条件中加载多个html元素，所以我们可以在模板元素上这样做。
示例代码如下：
div id=应用程序
模板v-if= 18岁
数学P的分数是多少？/p
英语多少分？/p
/模板
模板v-else-if=年龄=18岁25岁
p结婚了吗？/p
P考研了吗？/p
/模板
模板v-else
P加薪了吗？/p
P的工资是多少？/p
/模板
/div
脚本
让vm=new Vue({
埃尔： #app ，
数据：{
年龄：24岁
}
});
/脚本
3、用 key 管理可复用的元素
另外，在模板中，Vue会尽量重用已有的元素，而不是重新渲染，这样可以更高效。
如果我们允许用户在不同的登录方式之间切换：
div id=应用程序
模板v-if=loginType===username
=username 用户名的标签:/label
Type= text id=用户名 name=用户名 placeholder=用户名
/模板
模板v-else
=email 电子邮件的标签/标签
type= text id= email name= email placeholder= mailbox
/模板
差异
Button @click=changeLoginType 切换登录类型/button
/div
/div
脚本
const app=new Vue({
埃尔： #app ，
数据：{
登录类型：“用户名”
},
方法：{
changeLoginType(){
//如果类型是用户名，就切换到email，否则反过来。
this . log in type=this . log in type=== username ？电子邮件:用户名；
}
}
})
/脚本
接下来我们查看下效果图：
这个会有一个问题，就是如果我在用户名输入框输入信息，切换到邮箱，还是会保留之前的信息，肯定不符合要求。如果想让html元素每次切换都重新渲染，可以给需要重新渲染的元素添加一个唯一的key属性，其中key属性推荐使用shaping和string type。
示例代码如下：
div id=应用程序
模板v-if=loginType===username
=username 用户名的标签:/label
Type= text id=用户名 name=用户名 placeholder=用户名 key=用户名
/模板
模板v-else
=email 电子邮件的标签/标签
type= text id= email name= email placeholder= mailbox key= email
/模板
差异
Button @click=changeLoginType 切换登录类型/button
/div
/div
我们可以看到，当用户名原来输入的123切换到邮件模式后，输入框中的123就没有了。
注意：标签元素仍将被有效地重用，因为它们没有添加关键字属性。
4、v-show
根据条件显示元素的另一个选项是v-show指令。用法大致相同：
h1 v-show=ok 你好！/h1
不同之处在于，带有v-show的元素总是被呈现并保存在DOM中。V-show只是切换元素的CSS属性显示。
注意：v-show不支持模板元素，也不支持v-else。
4.1 v-if 对比 v-show
V-if是“真正的”条件呈现，因为它将确保条件块中的事件侦听器和子组件在切换过程中被正确销毁和重建。
v-if 也是惰性的：如果条件在初始渲染时为假，则什么也不做——直到条件第一次变为真，条件块将不会被渲染。
相比之下，v秀就简单多了。——不管初始条件是什么，元素总是会基于CSS进行渲染和简单切换。
一般来说，v-if的切换开销较高，而v-show的初始渲染开销较高。所以，如果需要非常频繁的切换，还是用v秀比较好；如果运行时条件很少改变，那么最好使用v-if。
这就是这篇关于vue条件渲染v-if和v-show的文章。更多相关vue条件渲染内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。