vue 点击按钮改变颜色

最新推荐文章于 2024-06-04 15:06:16 发布

小刘先生很努力

最新推荐文章于 2024-06-04 15:06:16 发布

阅读量3.9k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/lzfengquan/article/details/122983656

版权

在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue空白模板</title>
    <link
      href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <style>
      .ddd {
        transition: all 2s;
      }
    </style>
  </head>
  <body>
    <div id="app" class="container">
      <input type="text" class="form-control" v-model="txtName" @keyup="save" />

      <table class="table table-hover table-bordered" style="margin-top: 1rem;">
        <thead>
          <tr>
            <th>序号</th>
            <th>名字</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in list">
            <td>{{index+1}}</td>
            <td class="ddd" :style="item.styles">{{item.name}}</td>
            <td>
              <button
                @click="changeStyle(item, 'red', '20px')"
                class="btn-danger btn-sm"
              >
                红色
              </button>
              <button
                @click="changeStyle(item, 'blue', '18px')"
                class="btn-primary btn-sm"
              >
                蓝色
              </button>
              <button
                @click="changeStyle(item, 'green', '26px')"
                class="btn-success btn-sm"
              >
                绿色
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      // 要求做一个带有输入框的页面
      // [{id: 1, name: 'xxx', color: ''}, {id: 2, name: 'xxx', color: ''}]
      var app = new Vue({
        el: "#app",
        data: {
          txtName: "",
          list: [],
        },
        methods: {
          save(e) {
            if (e.keyCode === 13) {
              this.list.push({
                id: Date.now(),
                name: this.txtName,
                styles: {},
              });
            }
          },
          changeStyle(item, color, fontSize) {
            item.styles = {
              color,
              fontSize,
            };
          },
        },
      });
    </script>
  </body>
</html>

简单粗暴的改法：
在这里插入图片描述
添加样式的写法：

小刘先生很努力

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue 点击按钮改变颜色

代码如下：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>vue空白模板</title> <link href="https:/.
复制链接

扫一扫