Vue前端表单输入绑定(文本 (Text)、多行文本 (Textarea)、复选框 (Checkbox)、单选框 (Radio)、选择框 (Select))

复制到编译器，需要哪个复制那个 div放到 template里面、data放到js里面

 <!-- 文本 -->
<div>
  <input type="message" v-model="message" placeholder="edit me" />
  输入显示:{{ message }}
</div> 
data() { return { message:'',}}

<!-- 多行文本 -->
<div>
  <textarea  v-model="message" placeholder="add multiple lines"></textarea>
  输入显示:{{ message }}
</div> 
 data() { return { message:'',}}
 
<!-- 复选框 -->
<div>
  <input type="checkbox" v-model="message" id="aaa" value="Aaa" />
  <label for="aaa">Aaa</label>
  <input type="checkbox" v-model="message" id="bbb" value="Bbb" />
  <label for="bbb">Bbb</label>
  <input type="checkbox" v-model="message" id="ccc" value="Ccc" />
  <label for="ccc">Ccc</label>
  <span>字母为:{{ message }}</span>
</div>
data() { return { message:[],}}

<!-- 单选框 -->
<div>
  <input type="radio" v-model="message" value="aaa" />
  <label for="aaa">aaa</label>
  <input type="radio" v-model="message" value="bbb" />
  <label for="bbb">bbb</label>
  <input type="radio" v-model="message" value="ccc" />
  <label for="ccc">ccc</label>
  <span>>字母为:{{ message }}</span>
</div>
data() { return { message:[],}}

<!-- 选择框 -->
<!-- 单选时: -->
<div>
  <select v-model="selected" id="">
    <option>aaa</option>
    <option>bbb</option>
    <option>ccc</option>
  </select>
  <span>展示为:{{ selected }}</span>
</div>
data() { return { selected: ''}}

<!-- 多选时 -->
<div>
  <select v-model="selected" multiple>
    <option>aaa</option>
    <option>bbb</option>
    <option>ccc</option>
  </select>
  <p>{{selected}}</p>
</div>
data() { return { selected: ''}}  -->

<!-- 用 v-for 渲染的动态选项： -->
 <div>
    <select v-model="selected" name="" id="">
      <option
        v-for="item in list"
        :key="item.message"
        :value="item.message"
      >
        {{ item.message }}
      </option>
    </select>
    <p>输出：{{ selected }}</p>
  </div>
  data() { return { selected:'', list:[ {message:'早上好',value:'A'},
  {message:'中午好',value:'B'}, {message:'下午好',value:'C'}, ],}}