VUE JS在点击时将数据添加到数据绑定
VUE JS是一种流行的前端JavaScript框架，它提供了一种简洁、高效的方式来构建交互式的用户界面。在VUE JS中，可以通过绑定数据来实现动态更新页面的效果。
要在点击时将数据添加到数据绑定，可以使用VUE JS提供的事件绑定机制。具体步骤如下：
- 首先，在Vue实例中定义一个数据属性，用于存储要添加的数据。例如，可以在data属性中添加一个名为"items"的数组，用于存储要添加的数据项。
data() {
return {
items: []
}
}- 在HTML模板中，使用v-for指令遍历items数组，并将每个数据项渲染到页面上。
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>- 在需要添加数据的地方，使用v-on指令绑定一个点击事件，并在事件处理函数中将新的数据项添加到items数组中。
<button v-on:click="addItem">添加数据</button>methods: {
addItem() {
this.items.push("新的数据项");
}
}通过以上步骤，当点击"添加数据"按钮时，VUE JS会调用addItem方法，将新的数据项添加到items数组中，并自动更新页面上的数据绑定。
VUE JS的优势在于其简洁的语法和灵活的组件化开发方式，使得前端开发变得更加高效和可维护。它适用于构建各种类型的Web应用程序，包括单页面应用（SPA）和响应式网页设计。
腾讯云提供了一系列与VUE JS开发相关的产品和服务，包括云服务器、云数据库、云存储等。您可以通过腾讯云官方网站（https://cloud.tencent.com/）了解更多关于这些产品的详细信息和使用指南。
相关·内容
2回答
我想从数组中删除项目，但有相同的项目和js删除最后一个项目！
let app = new Vue({
el: '#app',
data: {
items: []
},
methods: {
addItem() {
this.items.push('');
},
removeItem(index) {
this.items.splice(index, 1);
}
}
});
<script src="https://unpkg.com/vue@2.1.10/
浏览 5提问于2017-12-25得票数 0
1回答
我想在添加数据后设置子组件的一些道具，但是怎么做呢？ 对于下面的示例，我想选择在方法additem()中添加的项，如何在Vue中实现它？ Vue.component('list-item', {
props: ['text'],
data() {
return {
selected: false,
}
},
methods: {
click() {
this.selected = true;
}
},
浏览 25提问于2019-05-20得票数 0
回答已采纳
在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
我试图弄清楚如何将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
回答已采纳
我的vue应用程序使用： component -由component-child组成的父组件 在component-parent中，我有按钮，当有人点击一个按钮时，我想要发出一个事件，以便由vue处理并传递给另一个组件 到目前为止，我所做的是： var vm = new Vue({
el: '#app',
methods: {
itemSelectedListener: function(item){
console.log('itemSelectedListener', item);
}
浏览 49提问于2017-02-04得票数 26
回答已采纳
我想删除项中的嵌套数组'Men‘。我还想使用函数addingData和removingData将新数据添加到嵌套数组'Human‘中。我尝试过切片和弹出功能，但在孩子身上不起作用 这是html代码 <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale">
<title>Graph</title>
</head>
<body
浏览 17提问于2019-02-15得票数 4
我使用Vue.js (cdn)和axios从heroku和mlab获得信息。
我想从列表中的对象中显示一些信息，我希望每一行都能像按钮一样运行，或者按一下按钮来显示来自下面同一对象的更多信息。就像一滴水。
我试了一下v-on按钮:点击=“可见=！可见”.这是工作的，但它切换显示/隐藏在所有的元素，如预期。
我希望能够在多个元素列表中的单个元素上切换显示/隐藏。
这就是我所拥有的：
index.html
<div id="app">
<div class="list" v-for="drinks in rom">
浏览 0提问于2018-12-27得票数 10
回答已采纳
我正在玩vue.js和react，我目前正在尝试从一本关于React的书中改编一个简单的可编辑的HTML示例，以便学习Vue。
下面是代码中发生的情况：
用户单击td元素
td元素的坐标存储在rowSel、colSel变量中。
坐标更改使Vue重新呈现视图。
用户单击的td单元格添加了"contenteditable=true“属性，并添加了焦点事件侦听器。
然后，用户可以更改td单元格中的数据，然后单击单元格停止编辑(触发焦点)。
当用户单击单元格时，rowSel和colSel变量将被重置，这将导致重新呈现。
vue重新呈现视图，并且由于重新设置了坐标，V
浏览 3提问于2016-12-07得票数 3
回答已采纳
我遇到的过渡问题，当动画点击‘流’按钮是不同的动画后，点击‘流随机’按钮，从摇铃。
也许我的造型是错的，但不知道为什么仍然得到流的行为。
我需要行为像‘流随机’的数组的div's。
谢谢
new Vue({
el: '#list-complete-demo',
data: {
items: [1,2,3,4,5,6,7,8,9],
nextNum: 10
},
methods: {
add: function (item) {
this.items.splice(this.items.length, 0, item
浏览 5提问于2017-12-11得票数 1
回答已采纳
1回答
我正在学习VueJS，所以这个例子可能看起来是人为的，但请耐心听我说。我正在学习组件是如何工作的。
问题是我无法让每一行中的Delete按钮从数组中删除适当的项(我使用的是splice)。相反，它总是从数组中删除第一项。我做错了什么？
下面是HTML：
<div id="app">
<p>Tasks: {{ count }}</p>
<input v-model="task">
<button v-on:click="addItem">Add Item</b
浏览 24提问于2020-02-07得票数 0
我用VueJS制作了一个简单的todo应用程序。我还添加了vue2 2-动画(一个Vue.js 2.0端口的Animate.css。用于Vue的内置过渡。)添加一个元素的动画工作正常。
但是有两个问题我想在没有不必要的编码的情况下解决
动画显示的列表，从本地存储工作下载的所有项目同时。我需要动画顺序工作为每个项目分开。
删除一个项目的动画不正确-最后一个项目总是被删除，然后转移。
P.S.：查看JSFiddle中的演示，因为本地存储不能在这样的片段中工作。
Vue.component("adder", {
data: function() {
r
浏览 0提问于2019-03-12得票数 1
回答已采纳
我一直在玩Vue Js，希望在Eclipse的前端使用它来创建一个虚拟的Java应用程序。据我所知，Vue单个文件组件是使用某些构建引擎(如Webpack等)编译成单个JavaScript文件。我现在不想那么做。因此，我尝试创建模仿JavaScript文件的.vue文件。但出于某种原因，Vue指令被从生成的HTML中删除。下面是说明性代码：
/** vuetest.js
* Javascript file that emulates a .vue file, to facilitate easy prototyping within an
* Eclipse Dynamic Web Appli
浏览 0提问于2018-02-20得票数 0
回答已采纳
我有两个Vue组件 组件A <template>
<div v-for="(item, index) in items" :key="index" class="row">
<input v-model="item.body" class="form-control">
<button v-on:click="updateItem(item)" class="btn btn-primary">Update<
浏览 22提问于2020-07-10得票数 0
我第一次使用Vue，为什么我的Vue对象在数据更改时不断更新，而另一个Vue对象不更新。
我有这样一个JavaScript模块，基本上只保存数据：
var MyModule = (function(){
const info = {
requestCount: 20,
arrayOfItems: []
}
return info;
})();
我有这个html：
<span id='requestCounter' class='badge'>{{count}}</span>
&
浏览 2提问于2017-03-24得票数 1
回答已采纳
1回答
我想改变每次点击计数变量。如果我在on:clik事件中添加"count++“，它就能工作。但是，当我想要使用一个函数时，不会做任何事情。我还试着把组件和“新视图”放在同一个文件js中，但是不工作并且显示一个空白页，为什么？谢谢
Prova.js
Vue.component('prova', {
data: function () {
return {
count: 0
}
},
template: '<div><button v-on:click="Add&
浏览 3提问于2021-12-07得票数 0
回答已采纳
我正在学习一些Vuejs，以提高我在JS生态系统中的游戏。我正在建立一份待办事项清单。我已经想出了一份表格。我还可以使用onlick事件检查它们。然而，当我点击一个li时，它将这个类应用于所有它们。
我试着翻了一下清单，但我觉得我做得不对。如果有人能让我朝正确的方向走的话。
HTML代码：
<div id="app">
<h1>{{ message }}</h1>
<ul>
<li v-bind:class="{ completed: isActive }" v-on:click="c
浏览 0提问于2019-02-16得票数 1
回答已采纳
1回答
我不能通过在输入中键入某一项来更改子输入；如何观察输入并使其影响到子输入。并验证是否有每个孩子的名字。
js：
$(function () {
var person = {
name: '',
children: ['Please enter a name']
}
var vm = new Vue({
el: "#example",
data: person,
methods: {
浏览 0提问于2016-10-09得票数 0
回答已采纳
在获得附加了字符串输入的API调用后，我得到了正确的结果。我遇到的问题是把它整合到我的前端。我尝试了很多我在网上找到的解决方案，但都不起作用，也无法理解。到目前为止，我已经这样做了：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type = text/javascript src = https://cdn.jsdelivr.net/npm/vue/dist/vue.
浏览 1提问于2020-08-05得票数 2
这段代码：
<tbody v-for="contact in contacts">
<tr v-on:click="selectContact(1)">
在Vue js中运行良好。
但这一点：
<tbody v-for="contact in contacts">
<tr v-on:click="selectContact({{contact.index}})">
似乎不太管用。导致错误。那么如何将像contact.index这样的环境变量传递到事件方法中呢？
浏览 32提问于2017-01-19得票数 0
回答已采纳
我正在尝试创建一个有两个插槽的组件。第二个插槽根据第一个插槽中的项目数重复。我已经使用范围槽实现了这一点，但是，当数据在第一个时隙上更新时，第二个插槽在触发事件之前不会自动更新它，例如:单击调用方法的按钮。
是否有办法使第二个插槽在第一个插槽上更改数据时更新其视图？
下面是我的例子：
Jsfiddle：
new Vue({
el: '#app',
components: {
'repeat-for-each-item': {
data: function() {
return {
ite
浏览 3提问于2017-05-02得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
