Vue实现单选、全选和反选

当多个checkbox通过 v-model 绑定到同一个数组时，每个checkbox被选中时，它的 value 会被添加到这个数组。

全选框通过 v-model 绑定到一个计算属性( checkAll )，这个属性必须实现了 getter 和 setter 方法，当model数组长度等于 fruits 长度，返回true，表示全选。改变checkbox的值时会触发 setter 方法，如果变为true，表示全选，如果变为false，表示全不选。

反选只关心checkbox值是否发生改变，并不关心值本身，所以没有为它设置v-model，而只是监听 change 事件

实现效果

对于checkbox和radio，如果不提供value， v-model 的值是true或false

如果提供value， v-model 的值是提供的value

本小节我们将介绍 Vue 中数据的双向绑定指令 v-model 。 v-model 的学习相对简单。我们可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

2 木子解释

用 v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。— 官方定义

v-model 是 vue 提供的用来对表单控件做数据双向绑定的指令。它可以根据用户的输入动态改变其绑定的值，同样可以根据绑定值的改变来 *** 作页面 DOM 的更新。

3 基本用法

接下来我们将详细介绍 v-model 在不同表单元素上的使用。

31 单行文本 input

实例演示

Document

名称是: {{ name }}

12345678910111213141516171819202122232425

"运行案例" 可查看在线运行效果

代码解释： 上述代码，我们通过 v-model 给输入框 input 和 name 形成双向绑定，当 input 中数据发生改变时 name 也会发生改变。同理，我们在控制台通过 vmname = "" 给 name 赋值时输入框的内容也会发生改变。

32 多行文本 textarea

实例演示

Document

描述是: {{ desc }}

"运行案例" 可查看在线运行效果

代码解释： 上述代码，我们通过 v-model 给输入框 textarea 和 desc 形成双向绑定，当 textarea 中数据发生改变时 desc 也会发生改变。同理，我们在控制台通过 vmdesc = "" 给 desc 赋值时输入框的内容也会发生改变。

实例演示

"运行案例" 可查看在线运行效果

代码解释： 上述代码，我们通过 v-model 给单个选择框 checkbox 和 isDelivery 形成双向绑定，当 checkbox 改变选中状态时 isDelivery 也会发生改变。同理，我们在控制台通过 vmisDelivery = true 给 isDelivery 赋值时 checkbox 的选中状态也会发生改变。

实例演示

"运行案例" 可查看在线运行效果

代码解释： 上述代码，我们通过 v-model 给多个选择框 checkbox 和 types 形成双向绑定，当任意 checkbox 改变选中状态时 types 也会发生改变。同理，我们在控制台通过 vmtypes = [] 给 types 赋值时对应 checkbox 的选中状态也会发生改变。

实例演示

"运行案例" 可查看在线运行效果

代码解释： 上述代码，我们通过 v-model 给单选按钮 radio 和 isFree 形成双向绑定，当 radio 改变选中状态时 isFree 也会发生改变。同理，我们在控制台通过 vmisFree = 0 给 isFree 赋值时 radio 的选中状态也会发生改变。

实例演示

"运行案例" 可查看在线运行效果

代码解释： 上述代码，我们通过 v-model 给选择框 select 和 company 形成双向绑定，当 select 改变选项时 company 也会发生改变。同理，我们在控制台通过 vmcompany = 0 给 company 赋值时 select 的选中项也会发生改变。

对于单选按钮、复选框及选择框的选项，v-model 绑定的值通常是静态字符串 （对于复选框也可以是布尔值）：

但是有时我们可能想把值绑定到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串。

代码解释： 上述代码中，我们通过 true-value 和 false-value 给 复选框指定来选中和非选中的值，当选中时 vmisDelivery === 'yes' ，当没有选中时 vmisDelivery === 'no'

代码解释： 上述代码中，我们通过 v-bind:value 给 randio 指定选中的值，当 radio 选中时 vmpick === vma 。

代码解释： 上述代码中，我们通过 v-bind:value 给 option 指定 value 值，当 该 option 选中时 vmselected 的值为 { number: 123 } 。

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 （除了上述输入法组合文字时）。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

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

本小节我们介绍了 Vue 数据双向绑定 v-model 的使用，主要包括以下知识点：

let a = documentgetElementById('phone_input')

       afocus() //需要手动聚焦一下

      consolelog(avalue)

      thisvalue14 = avalue

      consolelog(thisvalue14)

Vue 中提供了14个比较常用的指令，如

1v-model ：双向数据绑定，

表单元素常用 input select radio checkbox textarea 等，v-model有三个修饰符，例如input元素 v-modeltrim去掉输入值的前后空格和v-modelnumber，将输入的字符串转换为number,v-modellazy 输入的数据不再实时更新，而是数据失去焦点的时候再更新输入的数据

2v-show： 元素的显示和隐藏，

频繁 *** 作元素的显示和隐藏，就用v-show ,原理是 *** 作的dom 的css样式 display的值是true还是false

3v-if：

元素的显示和隐藏，原理是，是否创建元素的dom,例如表格中某条数据是否显示编辑，删除按钮，由后台传的数据解决的，这种不频繁 *** 作的情况可用v-if，v-if 可以加入template标签中判断 v-show 不可以

4v-else ： 和v-if 搭配使用

5v-else-if ：条件满足v-if ？

不满足判断v-else-if 如果还不满足直接走v-else 这个的使用方式和我们的js 中的 if ，else if() ，else 是类似的使用方式

6v-bind： 绑定

v-bind:class v-bind:style v-bind:attribute v-bind可以省略成：最后写成 ：class :style :attribute

7v-on ：绑定常用事件

下面的常用事件去掉on 改为@click：点击某个对象时触发@clickondblclick：双击某个对象时触发@dblclickonmouseover：鼠标移入某个元素时触发@mouseoveronmouseout：鼠标移出某个元素时触发@mouseoutonmouseenter：鼠标进入某个元素时触发@onmouseenter

8v-for：项目中常用循环数组的指令。

9v-html ：将字符串html 转换为结构显示，

项目中基本不这种方式去处理，涉及到安全性问题

10v-text：防止为了{{}} 闪烁问题 项目不常用

11v-once： 指令指的是元素仅仅绑定一次，只是渲染一次

12v-cloak：指的是cloak 等元素编译结束以后才会显示dom

13v-pre :跳过当前元素及子元素的编译过程，先进行编译

14v-slot：插槽

以上就是关于Vue实现单选、全选和反选全部的内容，包括:Vue实现单选、全选和反选、10《Vue 入门教程》Vue 双向绑定指令、vue的input输入框，动态更改value值后获取不到问题等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！