Vue学习笔记之表单输入控件绑定

Vue学习笔记之表单输入控件绑定

表单输入绑定

基础用法

文本

### 多行文本

### 复选框

爱好

{{ checked }}

var vm=new vue({

el:'#app',

date:{

checked:[]

},

单选按钮

性别

男

女

{{picked}}

var vm=new Vue({

el:'#app',

date:{

picked: ''

},

选择列表

单选列表

户口

请选vrWhgxx择

河北

山西

北京

{{ selected }}

var vm=new Vue({

vrWhgxx el:'#app',

date:{

selected:'',

},

多选列表（绑定到一个数组）：

A

B

C

Selected: {{ selected }}

new Vue({

el: '#example-6',

data: {

selected: []

}

})

绑定 value

对于单选按钮，勾选框及选择列表选项， v-model 绑定的 value 通常是静态字符串（对于勾选框是逻辑值）：

ABC

复选框

type="checkbox"

v-model="toggle"

v-bind:true-value="a"

v-bind:false-value="b"

>

// 当选中时

vm.toggle === vm.a

// 当没有选中时

vm.toggle === vm.b

单选按钮

// 当选中时

vm.pick === vm.a

选择列表设置

123

// 当选中时

typeof vm.selected // => 'object'

vm.selected.number // => 123

修饰符

.lazy

在默认情况下， v-model 在 input 事件中同步输入框的值与数据 (除了 上述 IME 部分)，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：

{{msg}}

.number

如果想自动将用户的输入值转为 Number 类型,可以添加一个修饰符 number 给 v-model 来处理输入值：

{{num1}}

{{num2}}

{{num1+num2}}

var vm=new Vue({

date:{

num1:1,

num2:1

},

});

.trim

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

{{msg}}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。