Vue.js表单-- v-model

Vue.js表单-- v-model

v-model指令在表单控件元素上创建双向数据绑定，只能用在表单元素中（input/checkbox/select等使用

 v-model的修饰符：  
   v-model.lazy   默认是同步更新，如果加了lazy修饰符，等光标离开之后才会更新视图
   v-model.number 这个值无法被parseFloat解析的话，会原样返回，如果可以被解析，则返回解析后的结果
   v-model.trim   去掉前后空格
输入框
  <div id="app">
  <p>input 元素：</p>
  <input v-model="message" placeholder="编辑我……">
  <p>消息是: {{ message }}</p>
  <p>textarea 元素：</p>
  <p style="white-space: pre">{{ message2 }}</p>
  <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
</div>

new Vue({
  el: '#app',
  data: {
    message: 'input',
	message2: 'textarea'
  }
})
复选框

复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组

<div id="app">
  <p>单个复选框：</p>
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
  <p>多个复选框：</p>
 		<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>
        <span>Checked names: {{ checkedNames }}</span>
</div>

<script>
new Vue({
  el: '#app',
  data: {
	checked : false,
    checkedNames: []
  }
})
</script>
单选按钮

单选按钮的双向数据绑定

<body>
<div id="app">
  <input type="radio" id="jack" value="Jack" v-model="picked">
  <label for="jack">苹果</label>
  <br>
  <input type="radio" id="google" value="Google" v-model="picked">
  <label for="google">桃子</label>
  <br>
  <span>你喜欢吃: {{ picked }}</span>
</div>
<script>
new Vue({
  el: '#app',
  data: {
	picked : 'Jack'
  }
})
</script>
</body>
select 列表
<body>
<div id="app">
  <select v-model="selected" name="fruit">
    <option value="">选择一个网站</option>
    <option value="www.baidu.com">Runoob</option>
    <option value="www.google.com">Google</option>
  </select>
  <div id="output">
      选择的网站是: {{selected}}
  </div>
</div>
<script>
new Vue({
  el: '#app',
  data: {
	selected: '' 
  }
})
</script>
</body>
posted @ 2020-08-11 11:55  Cupid05  阅读(105)  评论(0)  编辑  收藏  举报