vuejs中怎样将input中的输入值取出来

如果没学到jquery的情况下：var input_value = documentgetElementById(' in ')value; 如果学了jquery: var input_value = $("#in")val() ;

不会。在vue中，点击删除按钮发送请求删除了表格中的一行记录，这时候数据库中已经删除了，但是页面还没更新，所以需要常常发送请求重新获取表单数据，vue删除表格中的一条数据不会影响到前面已经定到数据。vue是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。

也就是说，我们要监听的是ruleForm对象中的domains属性，此时需要用到深度监听

此时，ruleForm的属性一发生变化，就会被watch属性监听到，对应的值就会发生变化。

还有一个比较容易理解的写法：

效果如图

注：途中的选择常用联系人可忽略网页截图 不好调试

正常在 methods 里面写一个简单的判断让后放在 mounted 里面就可以做到

如：

如上当页面加载的时候就可以判断了，当然在表单内容被改动的时候也要调用 check()

然后会发现一个问题，第一次对于表单 *** 作完成后 所有的判断都是正常，可当页面跳转以后或者刷新以后 会发现按钮变灰色的，但是表单里面都有数据

如下图

调试分析得出当页面进来的时候或者跳转的时候，数据可以读取缓存，但是 check 并没有执行

解决方案：

想到了vue的生命周期，在页面更新状态以后去调用 check() 就可以解决这个问题了

在如上的状态使用都可以

这是针对这个问题我的解决方案，如果各位看官们有更好更有效的方式，欢迎留言！！！！

通常情况下，我们可能会用v-for循环出一堆checkbox，提交数据的时候需要去获取选中的checkbox的value值，之前我的获取方式是给checkbox添加点击事件，这样确实能解决问题，但是总觉得有更好的办法，因为同为form表单元素的文本框就可以使用v-model来实现数据双向绑定，难道checkbox不能实现数据双向绑定吗？

呵呵哒，真的可以，我一直都不知道。。。。。。。。。

<input  type="checkbox"  v-model="checkFlag">

data () {

    return {

            checkFlag: true    //checkbox默认选中

    }

}

上面是最简单的用法，那如果使用场景是：购物车里循环遍历了所有用户添加的商品，用户选中一些商品，去结算，我们需要在结算的时候获取所有选中的checkbox的value值；

页面的大概效果如下：

这里我们给checkbox绑上了v-model的属性，以及value属性，checkedArr是一个数组，用来放选中的itemname，当checkbox选中或者取消都会触发v-model绑定的checkedArr值变化；

强调最重要的一点，v-model会在checkbox选中的时候，自动将当前的value值push进数组；在取消checkbox的时候，自动将当前的value值pop出数组。

以下是依次选中四个商品，然后取消商品4，打印的checkedArr的值

至于全选按钮什么时候选中，那我们可以watch一下checkedArr：

以上就是关于vuejs中怎样将input中的输入值取出来全部的内容，包括:vuejs中怎样将input中的输入值取出来、vue删除表格中的一条数据会影响到前面已经定到数据吗、vue-watch监听动态表单的数据等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！