Vue.js 从for循环定义派生变量

以下是我的标记：

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    <span :style="item.message.substr(-1) == '*' ? 'color: green' : ''">
      {{ item.message }}
    </span>
    <span v-if="item.message.substr(-1) == '*'">
      (special!)
    </span>
  </li>
</ul>

在这段代码中，我做了两次

item.message.substr（-1）='*'

。我希望能够将

item.message.substr（-1）='*'

赋值给一个变量。例如，

是特殊的

或类似的。然后我可以做以下工作：

• 使用
  而不是

• 使用
  而不是

我的问题是。。。我该怎么做

通常，对于新变量，您会使用

Vue

构造函数参数中的

data

属性。但是如果你在一个

v-for

中，那就不起作用了，所以我想知道我的选择是什么（如果有的话）

以下是JS小提琴：

---

您可以使用计算属性将item.message.substr（-1）='*'的值映射到新的对象属性

computed: {
 mappedArray(){
   return this.items.map(item => {
    item['isSpecial'] = item.message.substr(-1) == '*'
    return item
   })
}

---

可以使用计算属性将item.message.substr（-1）='*'的值映射到新的对象属性

computed: {
 mappedArray(){
   return this.items.map(item => {
    item['isSpecial'] = item.message.substr(-1) == '*'
    return item
   })
}

---

尝试使用计算属性映射数组

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo *' },
      { message: 'Bar' }
    ]
  },
  computed: {
     computedItems() {
        return this.items.map(item => {
          return Object.assign({}, item, {isSpecial: item.message.substr(-1) == '*'})
        })
     }
  }
})

使用

Object.assign

可确保不更改原始数组。并更新您的模板

<ul id="example-1">
  <li v-for="item in computedItems" :key="item.message">
    <span :style="item.isSpecial ? 'color: green' : ''">
      {{ item.message }}
    </span>
    <span v-if="item.isSpecial">
      (special!)
    </span>
  </li>
</ul>

{{item.message}}
（特别！）

---

这里有一个有效的

尝试使用计算属性映射数组

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo *' },
      { message: 'Bar' }
    ]
  },
  computed: {
     computedItems() {
        return this.items.map(item => {
          return Object.assign({}, item, {isSpecial: item.message.substr(-1) == '*'})
        })
     }
  }
})

使用

Object.assign

可确保不更改原始数组。并更新您的模板

<ul id="example-1">
  <li v-for="item in computedItems" :key="item.message">
    <span :style="item.isSpecial ? 'color: green' : ''">
      {{ item.message }}
    </span>
    <span v-if="item.isSpecial">
      (special!)
    </span>
  </li>
</ul>

{{item.message}}
（特别！）

这是一张工作票