如何使用Vue.js中的按钮点击事件并获取按钮属性
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使用Vue.js中的按钮点击事件并获取按钮属性相关的知识，希望对你有一定的参考价值。
参考技术A 第一步，在HBuilder工具中已创建好的Web项目，指定目录下新建静态页面buttonClick.html，如下图所示：如何使用Vue.js中的按钮点击事件并获取按钮属性
第二步，在title标签下引入vue.js核心javascript文件，注意压缩版本和开发版本，如下图所示：
如何使用Vue.js中的按钮点击事件并获取按钮属性
第三步，在<body></body>标签内，插入一个div和四个button，使用v-on绑定事件，如下图所示：
如何使用Vue.js中的按钮点击事件并获取按钮属性
第四步，在<div></div>标签下方，插入<script></script>标签，并在标签内编写事件函数，如下图所示：
如何使用Vue.js中的按钮点击事件并获取按钮属性
第五步，保存代码并在浏览器中查看结果，点击按钮，查看弹出的结果，如下图所示：
如何使用Vue.js中的按钮点击事件并获取按钮属性
第六步，弹出的结果为undefined，修改代码并在事件中传参数，然后再次查看结果，可以看到按钮的相关属性和方法（浏览器控制台），如下图所示：
如何使用Vue.js中的按钮点击事件并获取按钮属性
@click 事件不会更改 Vue.js 中的数据属性
【中文标题】@click 事件不会更改 Vue.js 中的数据属性【英文标题】：@click event not changing data property in Vue.js 【发布时间】：2020-12-06 20:34:42 【问题描述】：我在 Vue.js 中有一个 v-for 循环。它必须遍历一个列表来创建按钮。我在它们上添加了一个点击事件，所以upUrl 发生了变化，并将它们的按钮索引作为其值：
<div class="mt-3" v-for="(buttonPic, index) in buttonPics"
:key="buttonPic"
>
<button class="btn btn-sm btn-success"
@click="upUrl= index">
buttonPic </button>
</div>
我在data() 中有upUrl:null，但查看 Vue Google Chrome 控制台，我可以看到 upUrl 从未更新，并且始终等于 null。
我尝试过使用@click="upUrl= this.index">，但出现错误：'index' is defined but never used。
【问题讨论】：
【参考方案1】：它应该可以工作，检查以下示例：
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue(
el: '#app',
data()
return
upUrl: null,
buttonPics: ["pic1", "pic2", "pic3"]
,
watch:
upUrl(newVal, oldVal)
console.log(newVal, oldVal)
)<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app" class="container">
<div class="mt-3" v-for="(buttonPic, index) in buttonPics" :key="buttonPic">
<button class="btn btn-sm btn-success" @click="upUrl= index">
buttonPic </button>
</div>
</div>【讨论】：
我的错误是我在data() 中的upUrl 之前定义了buttonPics[ ]。我不知道订单很重要。
现在如果我取消 upUrl ，它在我的 Vue Google Chrome 控制台中不会改变。它的值是否会改变？
顺序无所谓，请分享如何登录控制台
我没有登录到控制台，我只是在看 Vue Google Chrome 控制台扩展。
数据正在发生变化，您可以通过观察它来证明这一点，就像我在编辑的答案中所做的那样以上是关于如何使用Vue.js中的按钮点击事件并获取按钮属性的主要内容，如果未能解决你的问题，请参考以下文章