vue的v-if里实现调用函数

更新时间：2022年07月02日 15:11:44 作者：kxukai

这篇文章主要介绍了vue的v-if里实现调用函数方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue v-if调用函数

<div v-if="test()"></div>

methods属性这样配置

methods: {
    test: function() {
        var result = false;
        // ...
        return result;
    }
}

使用v-if时的注意点

1.v-if和v-else或v-else-if之间不能添加其他元素

以下是错误事例

<span v-if="type==1">错误示范</span>
<span>哈哈哈</span>
<p v-else>嘿嘿嘿</p>

以下是正确实例

<span v-if="type==1">正确示范</span>
<p v-else>嘿嘿嘿</p>
<span>哈哈哈</span>

2.v-if 为同一类型组件

(或同一模板的dom树)来做显示和隐藏时，最好在最外层添加key属性来设定唯一标识，否则容易出问题

<template v-if="type=== 'username'">  
  <label>用户名</label>  
  <input placeholder="输入用户名">  
</template>  
<template v-else>  
  <label>邮箱</label>  
  <input placeholder="输入邮箱">  
</template>

以上代码切换时，仅仅切换placeholder，而不会重新渲染，因为他用了相同的模板

若v-if切换的是逻辑复杂的控件时，切换时不重新渲染极易出问题

需要给要重新渲染的控件添加一个key属性，来唯一标识该控件，被key标识后会重新渲染。

实例如下：

<template v-if="type=== 'username'" key="1">  
  <label>用户名</label>  
  <input placeholder="输入用户名">  
</template>  
<template v-else  key="2">  
  <label>邮箱</label>  
  <input placeholder="输入邮箱">  
</template>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue3使用viewer的详细用法举例
viewer.js用于图片浏览的Vue组件,支持旋转、缩放、翻转等操作,这篇文章主要给大家介绍了关于vue3使用viewer的详细用法,文中通过代码介绍是非常详细,需要的朋友可以参考下
2023-12-12
vue.js 使用v-if v-else发现没有执行解决办法
这篇文章主要介绍了vue.js 使用v-if v-else发现没有执行解决办法的相关资料,需要的朋友可以参考下
2017-05-05
vue的指令和插值问题汇总
Vue 是一套用于构建用户界面的渐进式框架，Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合，这篇文章主要介绍了vue的指令和插值总结,需要的朋友可以参考下
2022-10-10
在Vue中使用Avue、配置过程及实际应用小结
在项目中遇到通过点击加号实现输入框的增加、以及对该输入框的输入内容进行验证，通过这些诱导因素创作的这篇文章，本文重点给大家介绍在Vue中使用Avue、配置过程以及实际应用,需要的朋友可以参考下
2022-10-10
vue中如何实现复制内容到剪切板详解
有些业务需求需要点击按钮复制链接,下面这篇文章主要给大家介绍了关于vue中如何实现复制内容到剪切板的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-10-10
在Vue中使用highCharts绘制3d饼图的方法
本篇文章主要介绍了在Vue中使用highCharts绘制3d饼图的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-02-02
Vue3 + MybatisPlus实现批量删除功能(详细代码)
这篇文章主要介绍了Vue3 + MybatisPlus实现批量删除功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2024-03-03
Vue如何使用ElementUI对表单元素进行自定义校验及踩坑
有一些验证不是通过input select这样的受控组件来触发验证条件的 ,可以通过自定义验证的方法来触发,下面这篇文章主要给大家介绍了关于Vue如何使用ElementUI对表单元素进行自定义校验及踩坑的相关资料,需要的朋友可以参考下
2023-02-02
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
这篇文章主要介绍了解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
vue中mint-ui环境搭建详细介绍
这篇文章主要介绍了vue中mint-ui环境搭建详细介绍的相关资料,需要的朋友可以参考下
2017-04-04