Vue表单控件绑定 - Web

TOP

Vue表单控件绑定(三)

2017-10-10 15:54:18 【大中小】浏览:5421次

;ABC</option> </select>

　　但若要绑定value到Vue实例的一个动态属性上，就可以用v-bind实现，并且这个属性的值可以不是字符串

【复选框】

<div id="example">
  <input type="checkbox" v-model="toggle" :true-value="a" :false-value="b">
  <span>{{ toggle }}</span>
</div>

<script>
var example = new Vue({
  el: '#example',
  data:{
    toggle:'',
    a:true,
    b:false
  }
})
</script>

【单选按钮】

<div id="example">
  <input type="radio" v-model="pick" :value="a">
  <span>{{ pick }}</span>
</div>

<script>
var example = new Vue({
  el: '#example',
  data:{
    pick:'',
    a:true
  }
})
</script>

【选择列表】

<div id="example">
  <select v-model="selected">
    <option :value="{ number: 123 }">123</option>
    <option :value="{ number: 234 }">234</option>
    <option :value="{ number: 345 }">345</option>
  </select>
    <span>Selected: {{ selected.number }}</span>
</div>

<script>
var example = new Vue({
  el: '#example',
  data:{
    selected:''
  }
})
</script>

修饰符

【.lazy】

　　在默认情况下， v-model在input事件中同步输入框的值与数据，但可以添加一个修饰符 lazy ，从而转变为在change事件中同步

　　下列例子中，光标移出输入框时，才同步数据

<div id="example">
  <input v-model.lazy="message" placeholder="edit me">
  <p>Message is: {{ message }}</p>
</div>

<script>
var example = new Vue({
  el: '#example',
  data:{
    message:''
  }
})
</script>

【.number】

　　如果想自动将用户的输入值转为Number类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符number给v-model来处理输入值

　　这通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型

<div id="example">
  <div>
    <input v-model="age1" type="number">
    <span>{{type1}}</span>
    <p>普通输入: {{ age1 }}</p>    
  </div>
  <div>
    <input v-model.number="age2" type="number">
    <span>{{type2}}</span>
    <p>number修饰符输入: {{ age2 }}</p>    
  </div>
</div>

<script>
var example = new Vue({
  el: '#example',
  data:{
    age1:'',
    age2:'',
  },
  computed:{
    type1:function(){
      return typeof(this.age1)
    },
    type2:function(val){
      return typeof(this.age2)
    },
  }
})
</script>

【.trim】

　　如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符

首页上一页 1 2 3 4 下一页尾页 3/4/4
【大中小】【打印】【繁体】【投稿】【收藏】【推荐】【举报】【评论】【关闭】【返回顶部】

上一篇：对于vue.js初步了解	下一篇：js数组遍历和对象遍历