checkbox/select与v-model：将选择的内容存储到列表中

Posted 2021-07-17 安之ccy

checkbox：

绑定复选框与contentType：

<label v-for="c in blob.ctType" v-bind:key="c" >
    <input type="checkbox" name="ctType" :value="c" v-model="contentType"><label>{{c}}</label>
</label>

看一眼contentType，初始是个空列表：

data(){
  return {
      blob:{
          ctType:["Vue.js","React.js","Angular.js"]
      },
      contentType:[]
  }
}

选中复选框后，选择文字就会存储到contentType中

将contentType的内容展示出来：

<p>文章类型：<label for="" v-for="c in contentType" v-bind:key="c"> {{c}} </label></p>

效果：

select：

在select标签上双向绑定，而不是option上

<select v-model="author">
    <option v-for="author in blob.authors" v-bind:key="author" :value="author">{{author}}</option>
</select>

data(){
   return {
       blob:{
           authors:["ccy1","ccy2","ccy3"],
           ctType:["Vue.js","React.js","Angular.js"]
       },
       contentType:[],
       author:""
   }
}