V-on之间的区别:click=“...”并使用onclick="...“在Vue.js中
V-on是Vue.js中的一个指令，用于绑定事件监听器。它可以用来监听DOM事件，如点击、鼠标移动等，也可以监听自定义事件。
在Vue.js中，使用v-on指令可以通过简洁的语法将事件绑定到DOM元素上。例如，click="..."表示将一个点击事件绑定到元素上，当元素被点击时，相应的事件处理函数将被调用。
而在Vue.js中，onclick="..."是HTML中的一个属性，用于将一个点击事件绑定到元素上。它是传统的JavaScript事件绑定方式，不是Vue.js的推荐用法。
使用v-on指令的优势是可以更好地与Vue.js的数据绑定机制结合，实现响应式的数据更新。当事件触发时，Vue.js会自动更新相关的数据，从而更新对应的视图。
V-on指令的应用场景非常广泛，可以用于处理用户交互、表单提交、异步请求等各种场景。例如，可以将一个点击事件绑定到按钮上，当按钮被点击时，执行相应的逻辑操作。
在腾讯云的相关产品中，可以使用云函数SCF（Serverless Cloud Function）来处理V-on绑定的事件。云函数是一种无服务器的计算服务，可以根据事件触发自动运行代码，实现高可用、弹性扩展的后端逻辑处理。
更多关于腾讯云函数SCF的信息，可以参考腾讯云官方文档：https://cloud.tencent.com/product/scf
相关·内容
在Vue.js中使用v-on:click="..."和使用onclick="..."有什么不同？
我知道使用v-on:click需要在Vue对象(如)中编写处理程序，但是这样做有什么好处呢？只需编写一个onclick="..."来调用函数(在Vue对象之外)似乎就足够简单了。
浏览 0提问于2018-07-19得票数 3
回答已采纳
使用下面的代码，如果单击“添加”，您可以在控制台中看到值更改，但视图没有更新。
new Vue({
el: '#app',
data: {
dateValue: new Date(2017,0,1),
},
methods: {
addOne: function () {
this.dateValue.setDate(this.dateValue.getDate() + 1);
console.log('new date',this.dateValue);
}
}
浏览 1提问于2018-01-25得票数 3
回答已采纳
2回答
您知道，我们可以为JQuery中的类使用事件。例如
$(".example").click(function(){
//the process
})
我在Vue.js上是新手，我正在用vue.js Vue编写方法，使用为元素设置一个方法。但我不想为所有使用相同功能的元素定义attr。
例如
<ul class="container">
<li v-on="click:Menu" >Menu 1</li>
</ul>
<ol class="click">
&l
浏览 3提问于2015-07-22得票数 2
回答已采纳
和VUE.JS一起工作..。
有一个“theParent”组件，有两个孩子：'theForm‘和'theButtons’。(这是对更复杂情景的简化)。
在“theButtons”中有一个“清除”按钮来清除“theForm”表单的字段。
我能把事件从'theButtons‘传递给’家长‘，而不是从'theParent’传递到'theForm‘？
在“theButtons”中：
<b-button v-on:click="clean()">Clear</b-button>
methods: {
clean()
浏览 7提问于2020-12-01得票数 1
回答已采纳
在Vue中可以在添加到v-on中的字符串上添加v-html事件吗？在这个例子中，当点击“麦琪”链接时，什么都不会发生。它似乎没有在Vue注册。
或者还有别的方法可以做到？我使用的是Vue.js 2.1.3
Javascript
window.onload = function() {
new Vue({
el: '#app',
data: {
users: ['Homer', 'Marge', 'Bart', 'Lisa', '<a hr
浏览 11提问于2016-12-07得票数 7
我有一个用ajax内容更新的HTML页面。我将Vue.js用于一些动态的前端事件。
即使我尝试forceUpdate，动态添加的元素也不会与Vue.js实例交互。
我怎么能这么做呢？
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.0/vue.js"></script&g
浏览 24提问于2017-03-13得票数 1
回答已采纳
我一直在努力正确地将对象绑定到vue.js上的锚点(注意，这是我第一次使用vue.js)。
<li v-for="object in filterArray" :key="branchurl">
<a v-bind:href="object.url" v-on:click="function(object)"></a>
</li>
这将使我得到一个“属性或方法”数据“未在实例上定义，但在呈现过程中被引用。请确保此属性是响应性的，无论是在data选项中，还是通过初始化该属性对基于类的
浏览 0提问于2018-05-29得票数 0
首先，了解我的问题和选择:我正在将现有的JS项目转换为Vue.js框架。
我正在努力解决一个在jQuery中很容易解决的问题，但在Vue.js中却让我不知所措。
在我的代码中，我必须在加载整个页面之后生成画布，然后将它们添加到画布容器div中。当我点击一个按钮时，我需要更改所有这些画布的CSS。到目前为止，这些画布是使用document.createElement('canvas')添加的。
Vue的方法是向画布中添加一个v-bind:style属性，并通过在data()中设置一个变量( vue JS代码)来更改它，比如：<canvas v-bind:style="
浏览 2提问于2017-11-13得票数 0
回答已采纳
1回答
Vue 2.5动态下拉单击失败
、、、、
Vue.js 2.5动态下拉
下面的硬编码下拉列表工作。
<ul class="dropdown-menu" role="menu" id="dropdown">
<li><a href="#" v-on:click="setDate('2018-11-11')">2018-11-11</a></li>
<li><a href="#" v-on:click="setDate('201
浏览 0提问于2018-11-11得票数 1
回答已采纳
我正在写一段代码，在POST REST API上提交html表单数据。使用Vue.js和axios实现这一点。
我的Vue.js代码是这样的-
const app = new Vue({
el: "#main-div",
data() { return {
name: 'Please enter the name',
showEdit: true,
showResponse: true,
responseText: null
}
},
methods: {
浏览 2提问于2021-01-07得票数 0
5回答
我想将我的一些Vue.js方法分组到一个“子方法”类中，但我似乎只能使用单一级别的方法。
例如，如果我想拥有一组纯粹处理按钮操作的方法：
new Vue({
el: '#app',
data: { },
methods: {
buttonHandlers: {
handler1: function() {
dosomething;
},
handler2: function() {
dosom
浏览 8提问于2016-03-20得票数 13
我在我的vue.js项目中使用了vue-multiselect组件，我使用v-on指令在change事件上执行一个函数，
<multiselect v-model="selected" :options="projects" :searchable="false" :custom-label="customLabel" track-by="name" v-on:change="executeLoader">
<template slot="customLabel"
浏览 4提问于2018-03-30得票数 5
回答已采纳
使用v-on:click，我想在Vue.JS中用div的id设置一个变量--我该如何引用它呢？
<div id="foo" v-on:click="select">...</div>
<script>
new Vue({
el: '#app',
data: {
},
methods: {
select: function(){
divID = this.id // ??
浏览 0提问于2016-05-01得票数 33
回答已采纳
我正在构建我的第一个Vue.js项目，我希望通过左右键盘箭头键在页面(prev页面/下一页)之间导航。
我创建了 (并将我的代码附加在我的请求的底部)来演示我所面临的问题。当使用v-on:click时，我创建的警报方法工作得非常好。我尝试过使用v-on:keyup、v-on:keydown和v-on:keypress，但这两个选项都没有触发警报以指示arrowkey功能是否正常工作。
我发现这个详细描述了一个类似的问题，其中一条注释描述了我从v1.0.0开始使用的方法是一个可行的解决方案。我已经检查了当前版本的Vue的，似乎我做的一切都是正确的。
我很可能错过了一些关键的东西，但是经过大量的实
浏览 1提问于2018-10-25得票数 5
回答已采纳
我是Vue.js的新手。当在html模板之前加载javascript时，我发现绑定不起作用。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.min.js"></script>
<script type="text/javascript">
var demo = new Vue({
el: '#demo',
d
浏览 4提问于2017-04-28得票数 4
回答已采纳
我有一个包含大量html的div。我需要将该div的内容完全更改为另一组完全不同的html。我还必须使用Vue.js来完成所有这些操作，而不需要刷新页面。
我尝试在另一个页面上创建div，但问题是数据丢失了，所以我必须在不更改页面的情况下这样做。
<div id='questions'>
<div class="card card-1">
<div class="card-header">
<strong> [[ topic ]] | </strong> [[ s
浏览 23提问于2019-07-29得票数 1
2回答
我们使用Vue.js实现弹出函数。Vue App中的"Click“按钮将正确启动弹出窗口，但是当我从外部调用时，弹出窗口外部的vueApp.methods.openModal() /调用将不会出现，尽管函数调用本身是可能的。为什么会这样呢？此外，在像这样从外部调用方法时，如何使v-show正常工作？
xxx.html
<div id="app">
<button v-on:click="openModal">Click</button>
<div id="dbg_overlay" v-sh
浏览 4提问于2022-01-03得票数 1
回答已采纳
我有一个带有一些不同子标签的li标签，其中还包括一个b-form-checkbox。当我在li标签上的任意位置单击时，希望复选框起作用，该复选框也包括在复选框中。当我在li中的任何地方点击时，它都能正常工作，但当我点击b-form-checkbox时，onclick事件会被调用2次，而checkbox只需选中并取消选中1次。我尝试过很多方法，比如.self，但b-form-checkbox上的v-on:click不起作用。 下面的li标记代码包括它们所在的b-form-checkbox和template标记。 <template v-for="(product, index)
浏览 24提问于2021-07-02得票数 0
回答已采纳
我有一个像这样的Button.vue。我使用v-on="$listeners"将所有侦听器传递给<a>。
<template>
<a
v-bind="$attrs"
v-on="$listeners"
class="Button"
href="javascript: void(0)"
:class="{ disabled }"
@click="onClick(
浏览 3提问于2020-10-06得票数 2
回答已采纳
我试图复制Vue.js只是为了学习目的。
从最基本的角度来说，我可以这样做：
<button v-on-click="reverseMessage">Reverse Message</button>
var element = document.querySelectorAll('[v-on-click]')[0]
但是，我想知道他们是如何选择v-on:click的。
当我尝试document.querySelectorAll('[v-on:click]')时，我会得到以下错误：
Uncaught :未能在“文档”上执行
浏览 2提问于2017-08-14得票数 2
回答已采纳
1回答
初始问题:我正在使用vue.js中的一个模态窗口，该窗口是从父模块启动的，其代码如下：
<button v-on:click="openModal">Begin</button>
<Account v-if="showModal" :showModal=showModal></Account>
openModal函数由以下内容组成：
openModal () {
this.showModal = true
}
由vue组件(命名为Account)组成的模态窗口正在正常打开。但是，我想将一个变量作
浏览 3提问于2020-04-25得票数 0
回答已采纳
我在vue.js中创建了一个待办事项列表，子元素中的下面这段代码返回undefined <input v-model="titleText" type='text'>
<input v-model="projectText" type='text'>
<button class='ui basic blue button' v-on:click="sendForm()">
Create
</button>
<button class='
浏览 39提问于2019-11-20得票数 1
回答已采纳
1回答
如何访问另一个Vue中的Vue？
、、、、
这是我在两个不同的.chtml文件中的代码，每个文件都包含.js文件。
Layout.cshtml
File1.cshtml
vue1.js
vue2.js
我用的是c# .net mvc
Layout.cshtml
<div id="vuemainlayoutdiv">
<button v-on:click="onClick1()>
Click 1
</button>
<!--rendering File.html-->
@RenderBody()
&
浏览 6提问于2019-11-28得票数 0
我需要在vue.js文件中调用此方法：
par() {
this.jsontocsv++
}
但是我试着给他打电话，但是我不知道我该怎么做
<li> <a v-on:click="par" href="#"> Example 1</a></li>
浏览 3提问于2019-05-09得票数 0
3回答
vue.js组件创建了一个应该调用函数的按钮，但该函数从未被调用过，并且在Chrome的元素检查中看不到v-on:click。我的html是这样的：
<bottomcontent></bottomcontent>
我的Vue是这样的：
var bottomcontent = {
template: '<div class="bottomcontent"><div class="moreresults" v-on:click="appendcontent">More Results<
浏览 3提问于2017-07-30得票数 4
2回答
我尝试使用vue.js和Framework7构建一个Cordova/Phonegap应用程序。我了解了如何通过html元素中的"v-on:click="OnClick“属性来使用像"onClick”这样的函数。
但有一个问题。如何直接访问dom，以便可以使用jquery选择器选择整个css类。比如：$('.likeButton')。？
在offical的framework7中，我找到了类似这样的东西，可以通过它的函数访问dom：
this.$$ or this.Dom7
这是我已经在home.vue文件中写下的内容：
<script>
浏览 32提问于2018-03-04得票数 0
我正在接管一个包含大量AJAX加载HTML片段的项目。我想在可能的地方逐步介绍Vue.js。我并不试图异步加载任何组件定义或javascript，但我想加载一个具有如下v-on:click绑定的HTML片段：
<button class="btn btn-primary" v-on:click="showModal=true">
Show Modal Dialog
</button>
vuejs是否可以解析从jQuery中下来并读取v-*属性的html片段？
浏览 0提问于2018-09-11得票数 1
回答已采纳
我编写了代码来使用vue cli方法来增加和减少值，但是方法没有返回任何内容。但是默认值是打印在html上的，我怎样才能得到方法的值。
----------
//html
<div class="col-sm-4">
<div class="counter">
<center>Adults</center>
<div class="row">
<di
浏览 0提问于2018-06-23得票数 0
回答已采纳
我正在努力学习Vue.js，并找到了一个实践示例，在该示例中，我需要实现一个自定义指令，同时使用lice 'v-on‘。这意味着我需要捕获自定义指令上的click事件并调用一个方法。
我想的模板。
<template>
<h1 v-my-on:click="alertMe">Click</h1>
</template>
问题是，我不知道如何在自定义指令中捕获click事件。请原谅下面的笨拙代码。
<script>
export default {
methods: {
浏览 3提问于2018-01-28得票数 4
回答已采纳
3回答
我正在尝试在Vue.js (这是一个带有Vue.js前端的Rails应用程序)中创建一个登录按钮作为一个单文件组件。如果你点击这个按钮，它会把你带到一个外部提供商的登录页面。 如何将图像用作按钮？我猜你使用v-on:click进行实际的重定向，但我被困在那里了。 现在，下面的代码显示了一个看起来像img(src="../assets/img/login_button.png")的硬编码按钮。你可以点击它，但这显然不是我想要的。我想要显示实际的png图像，而不是路径。 // LoginButton.vue
<template lang="pug">
浏览 671提问于2019-06-10得票数 2
回答已采纳
9回答
如何在vue.js中切换类？
我有以下几点：
<th class="initial " v-on="click: myFilter">
<span class="wkday">M</span>
</th>
new Vue({
el: '#my-container',
data: {},
methods: {
myFilter: function(){
// some code to filter users
}
}
});
当我单
浏览 102提问于2015-11-16得票数 95
回答已采纳
2回答
Vue.js改性剂链
、、、、
我是Vue.js的新手。我在看医生，一点也听不懂.
order在使用修饰符时很重要，因为相关代码是按照相同的顺序生成的。因此，使用@click.prevent.self将阻止所有单击，而@click.self.prevent只会阻止对元素本身的单击。
我不明白‘’的意思，因此使用@click.prevent.self可以阻止所有的单击，而@click.self.prevent只会阻止对元素本身的单击。‘可以给出一个防止默认操作并显示差异的例子吗？
例如，使用链接(<a href="https://stackoverflow.com">@click.prev
浏览 11提问于2017-09-23得票数 0
1回答
我的小树枝文件看起来如下：
<select name="lineItems[{{ product.id }}][quantity]"
class="custom-select product-detail-quantity-select">
{% for quantity in range(product.minPurchase, product.calculatedMaxPurchase, product.purchaseSteps) %}
<option value="{{ qua
浏览 7提问于2020-03-11得票数 0
2回答
我正试图把Vue.js和velocity.js连接起来。指南给出了一个示例，但没有使用命名的转换。目前，我的过渡如下：
<transition name="collapse">
Vue.js文档中给出的示例设置了如下所示的转换元素：
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled
浏览 4提问于2017-04-21得票数 1
回答已采纳
如何用JSX编写vue语法v-on:click.native？
例如，JSX中的v-on:click是onClick。
浏览 0提问于2018-07-05得票数 9
回答已采纳
如何在vue.js中为列表呈现元素切换类？这个问题是this的一个扩展，回答得很好。我希望能够单独切换每个元素，也可以切换所有元素。我尝试过使用下面的代码来解决这个问题，但它感觉很脆弱，而且似乎不起作用。 一种不同的解决方案是使用单个变量来切换所有元素，然后每个元素都有一个局部变量，可以切换和关闭，但不知道如何实现该变量。 // html element
<button v-on:click="toggleAll"></button>
<div v-for="(item, i) in dynamicItems" :key=i
浏览 16提问于2019-03-15得票数 2
回答已采纳
0回答
我有一个vue.js小部件，它按如下方式实例化：
var foo = new Vue({
el: '#v-container',
methods: {
populate:function() {
// some custom code
}
},
});
html的内容如下所示：
<div id="main-container">
<lots of other HTML>
<div id="v-container">
浏览 9提问于2016-12-31得票数 3
1回答
Vue.js 1.0之前的版本中，你可以这样调用多个事件句柄：
<input type="text" v-on="
keyup: onKeyUp,
blur: onBlur
">
现在，随着1.0的发布，新的语法如下：
<input type="text"
v-on:keyup="onKeyUp"
v-on:blur="onBlur
">
我想找个办法给v-on打两次电话。似乎找不到有关vue.js 1.0+的多个事件处理程序的任何文档
浏览 3提问于2015-11-16得票数 0
1回答
我有两个Vue.js组件，大堂和游戏。我想使用游戏作为一个模型，它包含所有的逻辑来创建一个游戏并通过Lobby组件触发它。
如果运行该应用程序并单击该按钮，将得到以下错误
Uncaught TypeError: game.createGame is not a function
at click (eval at createFunction (vue.js:9923), <anonymous>:2:76)
at HTMLButtonElement.invoker (vue.js:1827)
如何从Lobby组件访问游戏方法？谢谢!
let Game = {
浏览 4提问于2017-09-23得票数 0
回答已采纳
我正在尝试允许将一个项目推送到我使用Vue.js遍历的次数列表。我不明白为什么当我点击按钮时，列表项会出现，而文本却不会。 HTML <div id="root">
<input v-modle="newCat" v-on:keyup.enter="addKitty">
<button v-on:click="addKitty">
+add
</button>
<ul>
<li v-for="cat in
浏览 10提问于2020-04-28得票数 0
回答已采纳
我试图弄清楚如何将v-for成员和原始事件数据访问到vue.js中事件的绑定函数中，但在我的一生中却无法在文档中找到它。
我想要的：
<div class="card pickup" v-for="pickup in pickups">
<select v-on:change="locationChanged">
使用locationChanged在vue对象中调用以下方法：
vuePickup = new Vue({
el: '#pickups',
data: {
浏览 2提问于2019-02-17得票数 0
回答已采纳
2回答
在Vue.js中，如何定位/检测单击的元素来执行基本的切换类？
我已经写了这段代码，它可以成功地切换，但是当你点击一个a时，这个类就会应用到所有的li
HTML
<ul id="app" class="projects">
<li v-bind:class="dyClass"><a href="" v-on:click.prevent.stop="show = !show">Project A</a></li>
<li v-bin
浏览 4提问于2018-09-18得票数 2
如何获得在Vue.js中激发该方法的元素的引用？我有这样的HTML：
<input type="text" v-model="dataField" v-bind:class="dataFieldClass" />
在我的Vue.js视图模型中，我有一个方法：
dataFieldClass: function () {
// Here I need the element and get its ID
// Pseudo code
var elementId = $element.id;
}
我知道可以从事件(
浏览 5提问于2017-06-15得票数 34
回答已采纳
2回答
Vue呈现按钮
、、、
我的问题是在vue实例上呈现一个按钮，点击一个按钮，然后再用事件单击呈现另一个按钮，如果我简单地挂载这个按钮，它就不会得到函数tes。
const Hello = {
props: ['text'],
template: '<button v-on:click="tes"> </button> ',
};
new Vue({
el: '#app',
data: {
message: 'Click me'
},
methods:{
alerta
浏览 1提问于2018-06-15得票数 0
回答已采纳
1回答
我想添加一些在运行时(即在初始化Vue实例之后)对单击处理程序做出反应的元素。通过v-html添加到DOM最终可以工作，但新的v-on属性仍未处理，因此这些按钮不起作用。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title />
<script src="https://code.jquery.com/jquery-3.3.1.slim.j
浏览 1提问于2019-04-05得票数 1
2回答
在Vue.js站点上有一个有趣的示例，它使用在浏览器中运行的JS反转字符串。如何通过使用Flask将字符串传递给Python，反转Python中的字符串，然后将结果发送回Vue -而不是在浏览器中执行字符串反转-来重新创建这个示例？
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
JS
var app5 = new Vu
浏览 3提问于2018-09-24得票数 1
回答已采纳
3回答
我是Vue.js (和引导-vue)的初学者，我想创建选项卡(比如)。
<b-nav class="nav-tabs">
<b-nav-item v-bind:active=true v-bind:class="{ active : tab === 1 }" v-on:click="tab = 1">Link 1</b-nav-item>
<b-nav-item v-bind:class="{ active : tab === 2}" v-on:click="tab
浏览 3提问于2017-06-21得票数 3
回答已采纳
我正在构建一个组件，它应该从父对象获取一个数组对象，并显示它们，并允许删除一些对象(=子对象向父对象发送一个新的Array)。
对于理解子->父级通信非常有用，但是我现在被一个错误困住了，我不明白：
Vue.component('search-box', {
template: '#search-box-template',
props: ['who'],
methods: {
deleteID: function(p) {
var user = _.filter(this.who, function(w
浏览 2提问于2017-06-08得票数 0
回答已采纳
我刚开始用Vue.js做实验
我尝试使用Vue.js在Todo应用程序中实现crud操作
我的代码无法删除待办事项。
删除todo项是在父类中实现的。
<template>
<div>
<p>Completed Tasks: {{todos.filter(todo => {return todo.done === true}).length}}</p>
<p>Pending Tasks: {{todos.filter(todo => {return todo.done === false}).lengt
浏览 2提问于2022-01-31得票数 0
回答已采纳
我需要创建一个函数，在单击按钮(#addDiv)时生成特定div (模板中的.container)的新实例。在此之前，按钮应该是唯一可以在网页上看到的东西。我该怎么做？
我知道用document.appendChild可以做到这一点。有更好的办法吗？
我正在使用切换功能，这是很好的工作，我已经把它包括在代码中，为您提供了整个画面。
Vue
Vue.component('dynamicdDvs', {
template: `
<div>
<div class="headerDiv">
<but
浏览 1提问于2018-05-16得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
