Javascript v-for不在vue.js中使用html元素

我是Vue.js的新手

我正在为输入元素实践准备演示，下面是我的代码

HTML

<div id="inputDiv">
<form action="">
    <input type="text" v-model="first_name">
    <input type="text" v-model="last_name">
    <input type="email" v-model="email">
    <div>
        <input type="radio" :name="gender" v-model="gender" value="male">Male
        <input type="radio" :name="gender" v-model="gender" value="female">Female
    </div>
    <textarea v-model="address" id="" cols="30" rows="10"></textarea>
    <br>
    <div v-for="hobby in hobbies">
        <input type="checkbox" v-model="userHobbies" v-bind:value="hobby">{{hobby}}
    </div>
</form>
</div>

在这里你可以看到，要显示带有标签的嗜好，我必须与家长进行迭代

添加div不是我想要的，如果我想在输入元素中

v-for

，比如：

 <input type="checkbox" v-for="hobby in hobbies" v-model="userHobbies" v-bind:value="hobby">{{hobby}}

{{hobby}

精简它的thowing异常[Vue warn]：instanc上未定义属性或方法“hobby”

---

我的问题是，在不使用HTML元素的情况下，是否可以在对象元素上使用v-for

  <div id="inputDiv">
    <form action>
      <input type="text" v-model="first_name">
      <input type="text" v-model="last_name">
      <input type="email" v-model="email">
      <div>
        <input type="radio" :name="gender" v-model="gender" value="male">Male
        <input type="radio" :name="gender" v-model="gender" value="female">Female
      </div>
      <textarea v-model="address" id cols="30" rows="10"></textarea>
      <br>
      <template v-for="hobby in hobbies">
        <input type="checkbox" v-model="userHobbies" v-bind:value="hobby">
        {{hobby}}
      </template>
    </form>
  </div>

男性
女性


{{hobby}

问题是，标记后的字符串插值

{{{hobby}

在循环之外，这就是为什么显示错误的原因，在这种特定情况下，您必须将其包装在某个内容内

如果您不想特别使用div，您可以选择label，这在本场景中更为自然。现在，如果用户单击标签，复选框将自动被选中

<label v-for="hobby in hobbies">
    <input type="checkbox" v-model="userHobbies" v-bind:value="hobby"> {{hobby}} <br>
</label>

男性
女性


{{hobby}


{{userhabiods | json}}

将其包装在

模板

标记中，因为模板标记不会出现在最终呈现的HTML中：

{{hobby}

或者更好地改进标记语义并使用标签标记：

{{hobby}

<label v-for="hobby in hobbies">
    <input type="checkbox" v-model="userHobbies" v-bind:value="hobby"> {{hobby}} <br>
</label>