有没有大神可以写一个vue.js,点击更改当前div样式的实例
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了有没有大神可以写一个vue.js,点击更改当前div样式的实例相关的知识，希望对你有一定的参考价值。
html>
<head>
<title>Hover</title>
<style type="text/css">
*
padding: 0;
margin: 0;
font-size: 11pt;
div
float: left;
width: 100px;
margin-right: 20px;
padding: 5px;
border: 1px solid #999;
background-color: #eee;）
Vue.js介绍：
Vue.js是当下很火的一个javascript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。
如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起来。一旦你创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更新。
当然了，在使用Vue.js时，你也可以结合其他库一起使用，比如jQuery。
参考技术A html><head>
<title>Hover</title>
<style type="text/css">
*
padding: 0;
margin: 0;
font-size: 11pt;
div
float: left;
width: 100px;
margin-right: 20px;
padding: 5px;
border: 1px solid #999;
background-color: #eee;
/* 鼠标悬停样式，有些IE浏览器不支持hover伪类 */
div.hover
color: red;
/* 被点击后的样式 */
div.click
border: 1px solid #ef0;
background-color: #ffc;
</style>本回答被提问者和网友采纳
单击增量按钮后跨度不更改值（Vue.js）
【中文标题】单击增量按钮后跨度不更改值（Vue.js）【英文标题】：Span not changing value after clicking the increment button (Vue.js) 【发布时间】：2020-10-10 09:26:05 【问题描述】：我是 Vue.js 的新手。当我单击增量按钮时，跨度值根本不会改变。我已经添加了点击方法并添加了一个条件。但它仍然没有改变跨度。谁能帮帮我？
代码如下：
App.vue
<template>
<div id="app">
<table class="table">
<tbody>
<tr class="tr" v-for="(p,index) in cart" :key="index">
<td>
<div class="columns is-multiline is-mobile is-hidden-desktop multilines">
<div class="column is-half">
<div class="buttons has-addons">
<button class="button test">-</button>
<span class="button test" id="value-quantity">p.quantity</span>
<button class="button test" id="increment-number" @click="increment">+</button>
</div>
</div>
</div>
</td>
</tr>
<!-- this.cart -->
</tbody>
</table>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld";
export default
name: "App",
components:
HelloWorld
,
methods:
increment()
this.quantity++;
// this.price = this.quantityorder * 8000
// alert(this.price)
,
data()
return
cart: [
id: 4,
quantity: 1
,
id: 1,
quantity: 3
,
id: 2,
quantity: 3
,
id: 3,
quantity: 1
,
id: 7,
quantity: 2
]
;
;
</script>
<style>
#app
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
</style>
可以在这里运行：
https://codesandbox.io/s/gifted-hooks-3po0z?file=/src/App.vue
【问题讨论】：
【参考方案1】：在您的 increment 方法中，您没有提到任何特定数量，您需要做的是将产品 ID 传递给它，即 @click="increment(p.id)"，然后遍历您的购物车数据属性并使用if 语句来查看 ID 是否匹配，然后增加特定项目的数量：
increment(id)
this.cart.forEach((item, i) =>
if (i.id === id) this.cart[i].quantity += 1;
)
如果你想添加一个减量方法，你几乎可以这样做：
<button class="button test" @click="decrement(p.id)">-</button>
decrement(id)
this.cart.forEach((item, i) =>
if (i.id === id) this.cart[i].quantity -= 1;
)
【讨论】：
没问题@TechDev ?【参考方案2】：您必须更改购物车变量中商品的数量。现在您正在更改其他数据。
<tr class="tr" v-for="(p) in cart" :key="p.id">
<td>
<div class="columns is-multiline is-mobile is-hidden-desktop multilines">
<div class="column is-half">
<div class="buttons has-addons">
<button class="button test">-</button>
<span class="button test" id="value-quantity">p.quantity</span>
<button class="button test" id="increment-number" @click="increment(p.id)">+</button>
</div>
</div>
</div>
</td>
</tr>
和方法：
increment(id)
this.cart.forEach((item, i) =>
if (item.id === id)
this.cart[i].quantity += 1;
);
你也在这里查看：https://codesandbox.io/s/mutable-star-mq6o6
【讨论】：
以上是关于有没有大神可以写一个vue.js,点击更改当前div样式的实例的主要内容，如果未能解决你的问题，请参考以下文章
我在vue.js命令中初始化webpack时就乱码了，麻烦哪位大神帮我看看，谢谢了