Vue笔记（二）

Vue的常用特性

表单的基本特性

获取单选框中的值

通过v-model
1、 两个单选框需要同时通过v-model 双向绑定 一个值
2、 每一个单选框必须要有value属性 且value 值不能一样
3、 当某一个单选框选中的时候 v-model 会将当前的 value值 改变 data 中的 数据

获取复选框中的值

1、 复选框需要同时通过v-model 双向绑定 一个值
2、 每一个复选框必须要有value属性 且value 值不能一样
3、 当某一个单选框选中的时候 v-model 会将当前的 value值 改变 data 中的 数据
在Vue里面是一个数组

<span>爱好：</span>
   <input type="checkbox" id="ball" value="1" v-model='hobby'>
   <label for="ball">篮球</label>
   <input type="checkbox" id="sing" value="2" v-model='hobby'>
   <label for="sing">唱歌</label>
   <input type="checkbox" id="code" value="3" v-model='hobby'>
   <label for="code">写代码</label>
<script>
    new Vue({
   
         data: {
   
                // 默认会让当前的 value 值为 2 和 3 的复选框选中
                hobby: ['2', '3'],
            },
    })
</script>

获取下拉框和文本框中的值

1、 需要给select 通过v-model 双向绑定 一个值
2、 每一个option 必须要有value属性 且value 值不能一样
3、 当某一个option选中的时候 v-model 会将当前的 value值 改变 data 中的 数据
textarea 是 一个双标签 不需要绑定value 属性的

表单修饰符

number 转换为数值

• 当开始输入非数字的字符串时，因为Vue无法将字符串转换成数值，开始为数字后面为字母，那么就会自动删掉从字母后面的所有的字符；
• 所以属性值将实时更新成相同的字符串。即使后面输入数字，也将被视作字符串。

.trim 自动过滤用户输入的首尾空白字符

• 只能去掉首尾的 不能去除中间的空格