vue中用js做一个点击按钮时按钮变色

可以通过以下代码实现：

在 HTML 中：

<button onclick="changeColor()">点击我变色</button>

在 JavaScript 中：

function changeColor() {
var btn = document.querySelector('button');
btn.style.backgroundColor = 'red';
}

当点击按钮时，按钮的背景颜色会变成红色。

相关问题

vue中用js做一个点击按钮是按钮变色

的效果该怎么实现？

可以通过以下代码实现：

HTML 代码：

<button id="myBtn" onclick="changeColor()">点击我</button>

JS 代码：

function changeColor() {
var btn = document.getElementById("myBtn");
btn.style.backgroundColor = "red";
}

点击按钮后，按钮的背景色将变成红色。

vue如何实现点击一个按钮自动添加一个文本输入框

Vue实现点击按钮自动添加文本输入框的过程，可以通过以下步骤实现：

1. 定义一个Vue组件，用来实现添加文本输入框的功能。
2. 在该组件中，使用v-for指令循环展示多个文本输入框。
3. 当点击添加按钮时，使用Vue的事件绑定机制，向数据中添加一个新的输入框内容。
4. 在数据变化后，组件会重新渲染并展示新的文本输入框。

具体实现代码如下：

<template>
  <div>
    <div v-for="(input, index) in inputs" :key="index">
      <input type="text" v-model="input">
    </div>
    <button @click="addInput">添加文本输入框</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputs: ["输入框1"]
    };
  },
  methods: {
    addInput() {
      this.inputs.push("输入框" + (this.inputs.length + 1));
    }
  }
};
</script>

在上述代码中，组件内部定义了一个存储输入框内容的数组inputs，默认展示一个输入框。当点击添加按钮时，使用Vue的push方法向数组中添加一条新数据，同时组件会重新渲染展示新增的文本输入框。