如何利用Vue.js库中的v-on指令绑定按钮点击事件

第一步，创建静态页面vonhtml，并引入vuejs关键的核心js文件，如下图所示：

第二步，在主题元素下插入div标签元素，并在其中插入一个input输入框和一个按钮，利用v-on指令绑定点击事件queryDate，如下图所示：

第三步，在div标签下方编写vuejs点击事件，事件是获取当前日期，如下图所示：

第四步，为了让输入框和按钮有间距，这里设置body元素样式，如下图所示：

第五步，预览该静态页面，然后点击按钮，发现输入框没有值，调试下发现错误，缺少jquery核心js文件，如下图所示：

第六步，引入jquery核心js文件后再次预览页面，并单击按钮，这时日期就显示在输入框内，如下图所示：

通常情况下，我们可能会用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：

看着简单实则小麻烦的一个功能

超过三行时，在文字后方显示省略号和展开按键

点击展开按键，显示全部内容

主要是使用getClientRects()length方法获取文本的行数，判断文本显示是否超过3行，大于3行时进行截取并重新给元素赋值。

页面宽度变化时需要重新进行计算。

在写vue的时候，首先要探究怎么让用户的 *** 作触发相关方法，在这里，我们通过一个按钮的点击，触发一个log。

那么，在这里，主要的就是要先在methods里面声明方法getConfig，然后在按钮中@click="getConfig"，这样按钮一点击就会触发执行getConfig方法了

以上就是关于如何利用Vue.js库中的v-on指令绑定按钮点击事件全部的内容，包括:如何利用Vue.js库中的v-on指令绑定按钮点击事件、vue中如何获取选中的checkbox的value值、Vue3中文本只显示三行，超过部分在文字后显示省略号和展开按键等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！