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

目录
  • vue v-if调用函数
    • methods属性这样配置
  • 使用v-if时的注意点
    • 1.v-if和v-else或v-else-if之间不能添加其他元素
    • 2.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> 

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

赞 (0)

相关推荐

  • Vue.js中v-show和v-if指令的用法介绍

    Vue.js中v-show和v-if指令的用法介绍

    目录 一.v-show指令 二.v-if指令 三.v-show和v-if的区别 四.v-else指令 五.v-else-if 一.v-show指令 v-show指令可以用来动态的控制DOM元素的显示或隐藏.v-show后面跟的是判断条件,语法如下: v-show="判断变量" 例如: v-show="true",表示显示DOM元素. v-show="false", 表示隐藏DOM元素. 看下面的示例: <!DOCTYPE html>

  • 图文讲解vue的v-if使用方法

    vue提供了一个用于判断的v-if .v-else语法,可以通过v-if和v-else进行内容的显示与隐藏.下面将通过使用v-if.v-else进行数据的显示与隐藏 1.新建一个html页面,然后创建一个div设置id为app,然后在这个div里面创建两个div,同时给这两个div设置不同的文本. 代码: <div id="app"> <div>当flage为true时显示</div> <div>当flage为false时显示</d

  • 对vue中v-if的常见使用方法详解

    使用过Vue的小伙伴一定使用过v-if 这个属性,但是这个属性主要是来干什么的呢,他得用途是那些? 这里我总结了一下,v-if使用一般有两个场景: 1- 多个元素 通过条件判断展示或者隐藏某个元素.或者多个元素 2- 进行两个视图之间的切换 下面我写了两个例子,是Vue官方的简单实例. 第一个实例实现了 type等于不同值,A,B,C 三个元素的展示情况. 第二个例子实现了,点击按钮实现两个视图的切换. <!DOCTYPE html> <html lang="en"&

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

    目录 vue v-if调用函数 methods属性这样配置 使用v-if时的注意点 1.v-if和v-else或v-else-if之间不能添加其他元素 2.v-if 为同一类型组件 vue v-if调用函数 <div v-if="test()"></div> methods属性这样配置 methods: { test: function() { var result = false; // ... return result; } } 使用v-if时的注意点 1

  • 在vue.js渲染完界面之后如何再调用函数

    在vue.js渲染完界面之后如何再调用函数

    目录 vue.js渲染完界面后调用函数 1.下面开始介绍下 2.运行之后 3.此时查询官方api文档发现 4.继续查询api文档发现 5.最终把watch和nextTick组合一起 6.运行后发现 vue渲染完成事件 vue里面本身带有两个回调函数 vue.js渲染完界面后调用函数 在使用vue.js框架的时候,有时候会希望在页面渲染完成之后,再执行函数方法来处理初始化相关的操作,如果只处理页面位置.宽或者高时,必须要在页面完全渲染之后才可以,页面没有加载完成之前,获取到的宽高不准确. 使用过j

  • 基于js里调用函数时,函数名带括号和不带括号的区别

    示例代码: <span style="font-size:18px;">function hi(){ var a = 1; return function(){ console.log(a++); }; }; var aaa = hi(); var bbb = hi; </span> 如以上代码: aaa 是将 hi() 的运行结果赋值给它,即 return 返回的匿名函数,此时有一个闭包,则每次调用 aaa 时都访问的同一个 a,aaa() 第一次运行结果为

  • vue在html标签{{}}中调用函数的方法总结及对比

    目录 一.问题 1)实现上述需求:有两种方式 2)两种实现方式对比: 二.解决方法(在html渲染时调用函数) 1.定义处理函数 2.引入处理函数,在data中定义函数,在html中使用 3.效果 4.优化 三.总结 一.问题 1.在html中对数据中的某一个标签是根据标签的类型书写的,值写在了{{}}中,希望显示的时候对值做某种细节处理. 例如:我的需求:后端返回姓名.年龄.出生日期.学历等组成的一个数组,出生日期要保存为带有时分秒的,但是显示时不需要时分秒. 1)实现上述需求:有两种方式 a

  • vue之封装多个组件调用同一接口的案例

    背景:项目中有多个组件调用同一接口,为提高代码可维护性,需要封装公共方法 直接return 接口调用的结果 export function getAll() { let all = []; let opt = { method: 'get', url: 'all/teacher', success: res => { all = res.data.value || []; }, fail: err => { tipInfo(err.data.desc, '提示', false, 'warnin

  • Vue 使用typescript如何优雅的调用swagger API

    Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务,后端集成下Swagger,然后就可以提供一个在线文档地址给前端同学. 前端如何优雅的调用呢? 入门版 根据文档,用axios自动来调用 // 应用管理相关接口 import axios from '../interceptors.js' // 获取应用列表 export const getList = (data) => { return axios({ url: '/app/list?s

  • vue button的@click方法无效钩子函数没有执行问题

    vue button的@click方法无效钩子函数没有执行问题

    目录 Vue项目中使用button绑定click事件 事件无法触发methods中的方法解决办法 跨域问题 userData is not defined Vue的第四个bug 钩子函数(mounted/created) Vue的第五个bug vue @click失效问题 贴代码(直接截图) 解决方法 Vue项目中使用button绑定click事件 事件无法触发methods中的方法解决办法 事故还原 小胖做完公司的项目,老大看着小胖疲惫的脸庞,有点心疼小胖,就给小胖放了三天假,没有给小胖新的需

  • Vue3初始化如何调用函数

    目录 Vue3初始化调用函数 入口文件 runtime-dom/src/index.tx ReactiveEffect Vue3程序初始化流程 初始化 改写的原因 流程实现 源码流程 初始化流程 Vue3初始化调用函数 createApp({}).mount('#app') 入口文件 runtime-dom/src/index.tx createApp -> createRenderer -> createBaseRenderer(这里还创建了render函数以及一系列渲染时的函数) ->

  • Go语言里的new函数用法分析

    本文实例讲述了Go语言里的new函数用法.分享给大家供大家参考.具体如下: 表达式 new(T) 分配了一个零初始化的 T 值,并返回指向它的指针. var t *T = new(T) 或 t := new(T) 代码如下: 复制代码 代码如下: package main import "fmt" type Vertex struct {     X, Y int } func main() {     v := new(Vertex)     fmt.Println(v)     v

  • JavaScript中5种调用函数的方法

    这篇文章详细的介绍了Javascript中各种函数调用的方法及其原理,对于理解JavaScript的函数有很大的帮助! JavaScript,调用函数的5种方法 一次又一次的,我发现,那些有bug的Javascript代码是由于没有真正理解Javascript函数是如何工作而导致的(顺便说一下,许多那样的代码是我写的).JavaScript拥有函数式编程的特性, 当我们选择面对它的时候,这将成为我们前进的阻碍. 作为初学者,我们来测试五种函数调用的方法,从表面来看我们会认为那些函数与C#中函数的

随机推荐