v-model: basics/radio/checkbox

by edith_tang

HTML

<div id="app">
  <input type="text" v-model="message" placeholder="您爱豆的姓名">
  <p>
  您要送小花花给：{{ message }}
  </p>
  <textarea v-model="comment" placeholder="说一段彩虹屁吧..."></textarea>
  <!-- 
    white-space CSS 属性是用来设置如何处理元素中的空白。
    pre: 连续的空白符会被保留。在遇到换行符或者<br>元素时才会换行。 
    
  -->
  <p style="white-space: pre">
  嘘~来听我吹彩虹屁：{{ comment }}
  </p>
  <!-- 使用`v-model`后，表单控件显示的值只依赖所绑定的数据，不再关心初始化时的`value`属性，对于在`<textarea></textarea>`中插入的值，也不会生效 -->
  <input type="text" v-model="validInput" value="我不会被显示吗？"><br><br>
  <textarea v-model="validTxt">v-model你你你...</textarea><br><br>
  <!--
    输入中文时，在输入拼音阶段不会触发更新。如果想要这么做的话，可以用@input来替换`v-model`
  -->
  <input type="text" @input="showPinyin" placeholder="我爱豆的拼音我也要！"><br>
  <p>
  让我看到我爱豆的拼音：{{ allIn }}
  </p>
    <hr>
  <!-- 单选按钮单独使用时，不需要v-model，直接使用v-bind绑定一个布尔类型的值，为真时选中，为否时不选 -->
  <p>
  你想要拥有《披荆斩棘的哥哥》吗？：
  </p>
  <input type="radio" :checked="oldBro" @click="handleStatusBro">
  <label>求求不要，我的眼睛</label>
    <hr>
  <!-- 如果是互相排斥的一组单选按钮，就需要用v-model配合value来使用 -->
  <p>pick 你最喜欢的小姐姐，没有之一！</p>
  <!--
    HTML的表单相关知识：将一个 <label> 和一个 <input> 元素匹配在一起，你需要给 <input> 一个 id 属性。而 <label> 需要一个 for 属性，其值和  <input> 的 id 一样。
  -->
  <input type="radio" v-model="pickSis" value="金晨" id="jc">
  <label for="jc">金晨小姐姐</label>
  <input type="radio" v-model="pickSis" value="宁静" id="nj">
  <label for="nj">静静子</label>
  <input type="radio" v-model="pickSis" value="陈松伶" id="csl">
  <label for="csl">陈松伶</label>
  <p>
  您pick到的是：{{ pickSis }}
  </p>
  <!--
    复选框单独使用时，和单选按钮的同异点：
      同：同样会绑定一个布尔值
      异：单选按钮用v-bind绑定布尔值，复选框则用v-model绑定。
  -->
  <input type="checkbox" v-model="checked" id="checked">
  <label for="checked">选择状态：{{ checked }}</label>
    <hr>
  <!-- 
    复选框组合使用
  -->
  <p>
  选两组喜欢的小姐姐：
  </p>
  <input type="checkbox" v-model="fav" id="eve" value="艾瑞巴蒂">
  <label for="eve">7 人组 Everybody</label>
  <input type="checkbox" v-model="fav" id="dwk" value="大碗宽面">
  <label for="dwk">7 人组 大碗宽面</label>
  <input type="checkbox" v-model="fav" id="blv"...

JavaScript

var app = new Vue({
	el: '#app',
  data: {
  	message: '朱一龙',
    comment: '一龙一龙我爱你 笼包笼包永相随',
    validTxt: '',
    validInput: '',
    allIn: 'zyl',
    oldBro: true,
    pickSis: '',
    checked: true,
    fav: []
  }, 
  methods: {
  	showPinyin: function(e) {
    	this.allIn = e.target.value;
    },
    handleStatusBro: function() {
    	this.oldBro = !this.oldBro;
    }
  }
})