如何在模版内定义一个临时变量?

有些表达式太长,而且会用到多次,想临时保存在一个变量里

不好放在data里

直接用计算属性,

发现你回复别人都不看描述的。。。我要在多层循环里定义个临时变量保存一个复杂的表达式,用计算属性?

  1. 写jsx。

  2. 用methods。

我最近也在思考这个问题

我们把响应式的属性可以声明在data里
非响应式的属性,比如上一个方法获取到值,要用到另外一个方法中

这种不需要响应式的属性,如果太多且没像data那样管理的话,代码看起来会很乱.

解决办法:

定义临时变量,但是需要给隐藏,否则会显示出来的

    <span v-show="false">
        {{message = chat.messages[chat.messages.length-1]}}
    </span>
    {{message.content}}

类似这样:

    <div v-for="key in selected" :key="key" :data-key="key" >
        {{ void (value1 = item[key], value2 = item2[key]) }}
        value1: {{ value1 }}
        value2: {{ value2 }}
    </div>

通常这种情况应当封装为细粒度的组件,这样几乎可以解决所有问题。但如果你一定要同组件内搞定……

Vue 模板语法其实提供了某种形式的局部变量定义能力:

<div v-for="it of items">...</div>
            ^^

<!-- 于是我们就可以 -->
<div v-for="(it, idx) of [ make(whatever(changes(you(like(to(data)))))), another(very(long(process(data)))) ]">
  <p v-if="idx === 0">Result of whatever changes: {{ it }}</p>
  <p v-if="idx === 1">Result of very long process: {{ it }}</p>
</div>

但很显然,这很蛋疼……那么 Vue 模板语法有没有提供更好用的局部变量定义能力呢?

有——作用域插槽(结合函数式组件):

<template-vars p1="天地玄黄,宇宙洪荒" p2="日月盈仄,辰宿列张">
  <template #default="{p1, p2}">
    <p>Phrase 1: {{ p1 }}</p>
    <p>Phrase 2: {{ p2 }}</p>
  </template>
</template-vars>
{
  components: {
    TemplateVars: {
      // 用函数式组件可以避免显式声明 props(Vue 2.3.0+)
      functional: true,
      // Vue 2 不支持片段 (Fragment),所以需要套一个 div 或者别的元素保证模板正常渲染
      // Vue 3 就没有这个限制了
      render: (h, {props, scopedSlots}) => h('div', scopedSlots.default(props)),
    },
  },
}

以上两个办法各有优劣,但它们都需要你「注册」点什么。毕竟,模板作为受控逻辑,Vue 是不建议你搞出一些模板专属的状态的。但如果你很看好 @qinkaiyuan@LZQCN 的方案,那么你还可以这样:

<div :data-vars="(p1 = '天地玄黄,宇宙洪荒', p2 = '日月盈仄,辰宿列张')">
  <h1>{{ p1 }}</h1>
  <h1>{{ p2 }}</h1>
</div>

v-bind 属性的值是一个 JS 表达式,那么就可以通过括号强行把赋值语句包装为表达式。结合逗号语法,我们就可以同时声明多个变量了。相比上面二位的方案,这样可以(在多数情况下)避免渲染不需要的 DOM 结构。但毕竟这属于旁门左道,如果可能最好还是遵守 Vue 的设计初衷来实现业务。

<template>
  <div>
    {{ void ( a = 1 ) }} 或 {{ (a = 1, void 0) }} 都不会渲染额外的 DOM 
  </div>
</template>

:grin:

找到方法没呀,我也想知道怎么处理,代码一长串还影响可读性。。。

六七八九楼都是解决方案