使用 vuejs 中的方法进行条件 @click

2023-12-19

这是我的 for 循环:

  <li v-for="(crumb, index) in breadcrumbs" :class="{ 'is-active' : index==breadcrumbs.length-1 }">
    <a href="javascript:void(0)" v-if="index==breadcrumbs.length-1">{{ crumb.name }}</a>
  </li>

@click="methodName" 不应在最后一次迭代中可用。

我可以使用 index==breadcrumbs.length-1 检查最后一次迭代 使用 apply v-if 可以吗?


可以通过这种方式定义事件处理程序:

v-on="condition ? { eventName: () => handler } : {}"

?: 运算符可用作 if...else 语句的快捷方式

在你的情况下,它会是这样的:

<li v-for="(crumb, index) in breadcrumbs" :class="{ 'is-active' : index==breadcrumbs.length-1 }">
    <a href="javascript:void(0)" v-on="index < breadcrumbs.length-1 ? { click: () => methodName(parms) } : {click: ($event) => $event.preventDefault() }" >{{ crumb.name }}</a>
</li>

小小提琴 http://jsfiddle.net/7w6m9jgb/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 vuejs 中的方法进行条件 @click 的相关文章

  • 用于在 JAGS 中定义分布的 if/else 语句

    在 JAGS 中 我想为参数 w i 定义泊松分布 如果另一个参数 e i 大于 0 该分布也会被截断 大于或等于 2 本质上我希望它代表 w i ifelse e i gt 0 dpois mu T 2 dpois mu 我尝试通过调整响
  • vuejs中如何获取组件编译后的html内容

    我有一个这样的组件
  • Vue.js - 当标头中使用 multipart/form-data 时,axios 中的文件上传验证失败

    我正在构建一个 Laravel Vue js SPA 单页应用程序 BootstrapVue https bootstrap vue js org Vee验证 https logaretm github io vee validate gu
  • 为什么我从 c# 到 js 得到不同的 MD5 哈希值?

    我有一个用于加密密码的 C 函数 System Security Cryptography MD5CryptoServiceProvider md5Provider new System Security Cryptography MD5C
  • 使用 jquery-chosen 插件更新 vuejs 模型值

    尝试使用jquery 选择 http harvesthq github io chosen 使用 vue 问题是这个插件隐藏了我应用的实际选择v model 所以当我选择一个值时 vue 不会将其识别为选择更改事件 并且模型值不会更新 当我
  • Excel,多个 IF AND 更高效的公式

    我正在制作一个电子表格 如下所示 Index Diff Exc Sym Sec Result Criteria Met 3 42 2 07 0 86 0 92 1 83 1 95 0 38 2 93 0 87 0 23 2 01 0 09
  • 在 SVG 中设置悬停语句样式

    我正在计划一个基于这个 SVG 插图的网络 菜单 我的想法的原则 一个样式为活动的圆圈 一个样式为悬停的圆圈以及一个也需要设置样式的伴随笔画 https i stack imgur com H397o png 当我阅读 SVG 文件的规范时
  • workbox webpack 插件从预缓存清单中排除文件夹

    我正在将 workbox webpack 插件与 vue cli 3 一起使用 并且我想将文件夹中的文件排除在外 以免添加到预缓存清单中 请参阅下面我当前的文件结构 src 资产 CSS 壳文件1 svg文件2 svg文件3 svg svg
  • Vuejs2 Modal 与 vue-router 中的路线

    我正在尝试使用模态创建一条路由 当您使用路由器链接访问此路由器路径时 会在当前页面上方显示一个模态 或者如果我直接从 url 访问 则会出现上面带有模态的索引 例如 我在http localhost 个人资料 1 http localhos
  • Laravel Vue SPA 与 MPA/SSR

    许多 laravel vue 教程使用 ajax 调用来获取数据 看来 SPA 与 Laravel 是完全隔离的 IE Laravel 只是一个数据 API vue 应用程序也可以简单地托管在第三方外部服务器 例如 AWS S3 上 这是推
  • SSRS 报告 - IIF 声明问题

    做一个表达式时出现错误 有人可以在这里告诉我正确的语法吗 IIf Fields t cpcp Value 310 Purchased Material Raw Material Nothing IIf Fields t cpcp Value
  • 如何为 VueJS 项目设置根/基 URL

    我已经部署了一个VueJS项目到像这样的域www example com 但是 我想将其移动到子文件夹 以便我可以像这样访问它www example com v1 如何设置基础 URL 或根 URLVueJS项目 注意 这与基本 URL 无
  • Vue js按钮冻结dom

    我试图在按下按钮时切换包含加载动画的跨度 直到使用 v if 函数完成 但是当我按下按钮时 DOM 冻结并且 span 元素保持不变 直到函数调用结束 如何让 DOM 不冻结并显示加载图标 非阻塞按钮按下可能是一个解决方案 HTML
  • Vue:单个网站可以使用多个 Vue 应用程序吗? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我有一个 Hugo 静态网站 我正在使用 Vue 使其动态化 我们正在转型 长期计划尚未确定 但在中期阶段我们正在使用 Vue 我已经在一个页面
  • 为什么在 vue 组件上输入另一个输入时,输入文件的值丢失了?

    我有两个组件 我的第一个组件 父组件 如下所示
  • if/else 在 while 循环内正确缩进[关闭]

    Closed 这个问题是无法重现或由拼写错误引起 help closed questions 目前不接受答案 我开始学习 Python 编程大约几周了 我遇到了一些麻烦 下面的代码是一个小程序 用于检查列表中是否有偶数 如果找到第一个偶数
  • VueJS - 验证表单文件上传中的文件大小要求

    我正在使用 Bootstrap Vue 表单制作一个简单的表单 用户可以在其中上传文件 有没有办法验证使用 Vue 表单选择的文件的大小 我想阻止用户上传此类文件 我见过this https stackoverflow com questi
  • 检查非零的惯用方法

    当我想检查一个值是否为0在C中 它是如何惯用的 if num if num 0 虽然这是一个品味问题 但我发现这很大程度上取决于意图 如果该值用作布尔值 没关系 如果值正在计算某些东西 则相等更有意义 if isVisible if isV
  • 如何在 ifelse 中使用示例

    我有以下清单 x rep a 100 如果我使用下表 ifelse x a sample c 1 100 1 0 当我第一次运行时 我得到以下输出 1 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22
  • 来自外部文件的 PHP 变量?

    编辑 完成的解决方案 工作代码 所以 这是我的一个朋友帮我想出来的 这是我在 K2 items php 文件中使用的部分 div class fb comments div

随机推荐