vue v-if方法扩展写法

迈不过友情╰ 2022-04-22 13:44 115阅读 0赞

在使用vue的时候，经常会使用到v-if、v-else-if、v-else通过条件来判断具体显示某种信息，这种方法虽然可以实现，在整体代码看起太过低级，可用以下两种方式来替代：

例1：

<span v-if="YJLX=='1'">收件箱</span>
    <span v-else-if="YJLX=='2'">发件箱</span>
    <span v-else="YJLX=='3'">草稿箱</span>

方式1：

<span>{
       {["收件箱","发件箱","草稿箱"][Number(props.item.YJLX) - 1]}}</span>

方式2：

使用过滤器filter：

<span>{
       { props.item.YJLX | judgeLX }}</span>

然后定义一个过滤器：

filters:{
       judgeLX:function(value){
          var returnValue="";
          switch(value){
             case 1:
                returnValue="收件箱";
                break;
             case 2:
                returnValue="发件箱";
                break;
             case 3:
                returnValue="草稿箱";
                break;
          }
          return returnValue;
       }
    }

filter可全局定义：

Vue.filter('judgeLX', function (value) {
    
    })

例2：

<input v-if="props.item.SFYD=='1'" type="checkbox" checked="checked">
    <input v-else="props.item.SFYD=='0'" type="checkbox">

改写：

<input type="checkbox" :checked="props.item.SFYD=='1'">

发表评论取消回复

表情：

评论列表（有 0 条评论，115人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 动态样式写法

在Vue中，可以使用动态样式来根据组件的数据或计算属性来动态地设置元素的样式。Vue提供了多种方式来实现动态样式的写法，以下是几种常见的方法：使用:style指令：可以

喜欢ヅ旅行/ 2024年03月24日 19:20/ 0 赞/ 40 阅读

相关 vue脚手架的写法

在 Vue.js 中，可以使用 Vue CLI（脚手架）来创建和管理 Vue 项目。以下是使用 Vue CLI 4.x 版本创建 Vue 项目的步骤：确保你已经安装了 No

布满荆棘的人生/ 2024年03月17日 22:13/ 0 赞/ 31 阅读

相关 vue-property-decorator vue typescript写法

什么是Typescript TypeScript 是一种由微软开发的自由和开源的编程语言，它是 JavaScript 的一个超集，扩展了 JavaScript 的语法。作

偏执的太偏执、/ 2023年06月21日 07:16/ 0 赞/ 81 阅读

相关 vue计算属性写法2

<template> <div> <h2>\{ \{ msg \}\}</h2> <p>新闻ID：\{ \{ $route.params.newsId\}\}</p>

川长思鸟来/ 2022年10月31日 00:45/ 0 赞/ 94 阅读

相关 Vue组件分离写法

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

落日映苍穹つ/ 2022年10月29日 06:28/ 0 赞/ 148 阅读

相关 VIF检验相关性

`VIF`可以用来度量多重共线性问题， V I F j = 1 1 − R j 2 \\quad \\mathrm\{VIF\}\_\{j\}=\\frac\{1\}\{1-R

冷不防/ 2022年09月12日 02:55/ 0 赞/ 226 阅读

相关 vue的两种写法

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti

旧城等待，/ 2022年09月10日 12:11/ 0 赞/ 193 阅读

相关在vue中给对象扩展属性的方法

在vue中给对象扩展属性的方法。如下图所示给seller对象扩展一个属性id，利用立即执行函数给id赋值 ![2018050810200874][]

Bertha 。/ 2022年05月25日 04:37/ 0 赞/ 182 阅读

相关 vue v-if方法扩展写法

在使用vue的时候，经常会使用到v-if、v-else-if、v-else通过条件来判断具体显示某种信息，这种方法虽然可以实现，在整体代码看起太过低级，可用以下两种方式来替代：

迈不过友情╰/ 2022年04月22日 13:44/ 0 赞/ 116 阅读

相关 Vue Router升级版写法

router/index.js import Index from '../pages/Index' import Mine from '../pages

「爱情、让人受尽委屈。」/ 2022年02月26日 06:16/ 0 赞/ 273 阅读