<nuxt-link :to="link.headKeywords" prefetch class="w_100" :class=" link.i === 3 ? [news_actionIndex === i ? 'nav_action' : ''] : link.i === 3 " > {{ item.productClassifyName || item.jourlismClassifyName || item.headTitle }} </nuxt-link>三元表达式怎么写
时间: 2024-02-10 13:15:33 浏览: 79
三元表达式的写法如下:
```javascript
link.i === 3 ? (news_actionIndex === i ? 'nav_action' : '') : link.i === 3
```
其中 `link.i === 3` 是第一个条件语句,如果满足该条件,就会执行 `news_actionIndex === i ? 'nav_action' : ''`,否则执行 `link.i === 3`。
相关问题
<nuxt-link :to="link.headKeywords" prefetch class="w_100" :class="[]" > {{ item.productClassifyName || item.jourlismClassifyName || item.headTitle }} </nuxt-link>动态绑定类名 在link.i===1 和===3的时候拥有 'nav_action'的样式
这是一个 Nuxt.js 模板中的代码,其中使用了动态绑定 class 属性的方式来控制样式的应用。在这个模板中,`:class="[]"` 表示该元素初始时不应用任何样式。然后,在 `nuxt-link` 标签上使用了动态绑定 `class` 属性的方式,通过 JavaScript 表达式来判断何时应该应用 `'nav_action'` 样式。具体来说,当 `link.i` 的值为 1 或 3 时,会在 `class` 属性的值中添加 `'nav_action'` 样式,否则不添加。因此,只有在 `link.i` 的值为 1 或 3 时,才会应用 `'nav_action'` 样式。
<nuxt-link data-nuxt-link prefetch :to="item.headKeywords" class="Nav_title head_nav_font animate__animated animate__bounceIn" @click="titleFn(i, item)" v-show="item.headTitle" > {{ item.headTitle }} </nuxt-link>的data-nuxt-link是什么意思
`data-nuxt-link` 是一个自定义 HTML 属性,它的作用是告诉 Nuxt.js,这是一个 Nuxt.js 的链接。这个属性在 Nuxt.js 中被用于实现客户端路由的预加载,也就是 `prefetch` 属性所依赖的属性。当用户浏览网页时,Nuxt.js 会自动预加载这个链接所对应的页面,以提高用户体验。
在代码中,`data-nuxt-link` 属性被设置为 `true`,表示这个链接是一个 Nuxt.js 的链接。这个属性是可选的,如果不设置,Nuxt.js 也会自动识别这个链接。
阅读全文