javascript - vue 列表中的每个项目的 if 不同

Question

我正在使用“v-for”创建一个列表，其中每个项目都必须有一个 if ，该 if 具有与数组相对应的不同值，但 Vue 不允许创建从 {{ i 开始的“v-if”表达式.some_data_to_evaluate }} .

有办法解决这个问题吗？

这是我的代码:

HTML

<div id='test' v-for="i in items"> 
  <p v-if={{i.value}}>{{i.some_text}}</p>
  <p v-else>{{i.other_text}}</p>
</div>

JS

let test = new Vue({
  el: '#test',
  data: [
  {some_text: 'jhon', other_text: 'jonas', value:false},
  {some_text: 'joao', other_text: 'maria', value:true}
 ]
})

我只是想更改 Vue 指南中的版本。

链接如下:http://vuejs.org/guide/list.html

Answer 1

您应该将 v-if 指令中的括号替换为引号:

<div id="test" v-for="i in items"> 
  <p v-if="i.value">{{i.some_text}}</p>
  <p v-else>{{i.other_text}}</p>
</div>