6）表单绑定与过滤器定义

原创

rulix 2021-08-08 15:52:16 博主文章分类：JavaScript和Vue ©著作权

文章标签 表单是怎么双向绑定的 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者rulix的原创作品，请联系作者获取转载授权，否则将追究法律责任

1) 关于样式

v-bind:class=

v-bind指令可以绑定class以实现动态切换样式的效果，它可以与其他class共存
格式1: v-bind:class="{className: true/false}" true/false是vm对象的属性
格式2: v-bind:class="classObject"  classObject是vm对象属性中的对象
格式3: v-bind:class="[name1, name2]"  name是vm对象属性中定义的类名

b-bind:style=

  v-bind指令可以绑定style以实现内联样式修改
  格式1: v-bind:style="{color: value_name}" value_name是vm对象的属性
  格式2: v-bind:style="styleObject"  styleObject是vm对象属性中的对象
  格式3: v-bind:style="[name1, name2]"  name是vm对象属性中定义的名称

2) 关于表单

v-model会忽略所有表单元素的value\checked\selected属性

因此总是将vue实例的数据属性作为初始值

a) 对于单行文本输入, 将绑定用户的输入值到vm对象的属性中 <input type="text" v-model.trim="valNum">

b) 对于多行文本输入, 将绑定用户的输入值到vm对象的属性中 <textarea class="text-primary" v-model="valDescribe">

c) 对于复选框，单独使用和成组使用，vue绑定的值不一样单独: <input type="checkbox" v-model="Sel"> ,将绑定布尔值到vm对象的属性中成组: <input type="checkbox" value="player" v-model="aRay"> 将绑定value到vm对象的'数组'属性中,以完成多选择结果(如果没有value呢？)

d) 对于单选按钮，单独使用和成组使用，vue绑定的值也是不一样单独: <input type="radio" v-model="Sel"> ,将绑定value到vm对象的属性中或者为空成组: <input type="radio" value="1" v-model="gEnder"> 将绑定value到vm对象的属性中, 即使成组单选按钮也只有一个选择结果

e) 对于选择框，单选和多选，vue绑定的值也是不一样单选: <select v-model="eDucation"> , 将绑定<option.value>的值到vm对象属性中多选: <select multiple v-model="eDucations" 将绑定<option.value>的值到vm对象的'数组'属性中,以完成多选择结果(如果没有value呢？)

++以上所有表单中绑定的value值，实时上也可以v-bind:value="属性";++ 除了用户输入，其他用户行为基本上也可以通过绑定达到预期的输入效果