前端vue学习曲线（12）表单输入绑定

1.文本内容

<input v-model="message1" placeholder="#文本" />
<p>#文本内容：{
  {message1}}</p>

2.多行文本内容

<textarea v-model="message2" placeholder="#多行文本"></textarea>
<p style="white-space: pre-line;">#多行文本内容：{
  {message2}}</p>

3.单个复选框，绑定到布尔值

<input type="checkbox" v-model="checked" id="checked" />
<label for="checked">{
  {checked}}</label>

4.多个复选框，绑定到同一个数组

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames" />
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
<label for="mike">Mike</label>
<br />
<p>Checked names：{
  {checkedNames}}</p>

5.单选按钮

6.选择框

（1） 单选