薛乎乎~ 2024-10-09 20:25 采纳率: 81%
浏览 2
已结题

利用vue实现下列效果

页面中添加四个按钮：红、黄、蓝、黑，再添加一个矩形框，点击不同的按钮，矩形框的颜色会被切换。


```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <style>
        #box{
            width: 500px;
            height: 500px;
            border: 5px;
            background-color: aqua;
        }
        .div1{
            border: red;
        }
        .div2{
            border: yellow;
        }
        .div3{
            border: blue;
        }
        .div4{
            border: black;
        }
    </style>
</head>
<body>
    <div id="app">
    <button @click="handler1">红</button>
    <button @click="handler2">黄</button>
    <button @click="handler3">蓝</button>
    <button @click="handler4">黑</button>
    <div id="box" :class="sex[index]"></div>
    </div>
    <script>
        let user = {
            isYes1:true,
            isYes2:true,
            isYes3:true,
            isYes4:true
        };
        let vm=new Vue({
            el:'#app',
            data:user,
            methods:{
                colord(index){
                    this.sex[index]=sex[index]
                }
            }
        })
    </script>
</body>
</html>

```

  • 写回答

2条回答 默认 最新

  • 一轮明月照丘壑 2024-10-09 20:26
    关注

    以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

    你的代码基本上是正确的，只需要进行一些小的调整来实现你的需求。在 Vue 中，我们可以使用 v-bind 或 : 来绑定属性，包括样式和类。为了实现你的需求，我们需要动态改变矩形框的颜色，这就需要我们使用数组来存储颜色对应的类名，然后在点击按钮时更改数组的索引以改变类名。下面是修正后的代码：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 颜色切换</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <style>
        #box {
            width: 500px;
            height: 500px;
            border: 5px solid transparent; /* 使边框可见 */
        }
        .red { background-color: red; }
        .yellow { background-color: yellow; }
        .blue { background-color: blue; }
        .black { background-color: black; }
    </style>
</head>
<body>
    <div id="app">
        <button @click="index=0">红</button> <!-- 使用 index 来标记颜色 -->
        <button @click="index=1">黄</button> <!-- 使用 index 来标记颜色 -->
        <button @click="index=2">蓝</button> <!-- 使用 index 来标记颜色 -->
        <button @click="index=3">黑</button> <!-- 使用 index 来标记颜色 -->
        <div id="box" :class="['box', colors[index]]"></div> <!-- 使用数组语法绑定类名 -->
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                index: 0, // 设置默认颜色索引为红色，即数组的第一个元素（索引为 0）对应的颜色。其他的颜色是数组中的其他元素。因为数组的索引是从 0 开始的，所以不需要在数组中增加额外的元素。直接根据点击的按钮更改索引即可改变颜色。这个数组包含了你想要的所有颜色对应的类名。这样当你点击不同的按钮时，它就会更改 div 的类名从而改变背景颜色。如果你需要添加更多的颜色，只需在数组中添加更多的元素即可。当然也可以改变元素的顺序以更改按钮与颜色的对应关系。                           colors: ['red', 'yellow', 'blue', 'black'] // 对应四个按钮的颜色类名数组                                                                                                                                                                                                                                                                                                                                                                                                                                                               } 
        });           </script> </body></html> ```这个代码中定义了四个按钮分别代表四个颜色。每次点击一个按钮，就会把对应颜色的类名绑定到矩形框上，从而改变矩形框的颜色。这样你就实现了你的需求。
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 11月4日
  • 已采纳回答 10月27日
  • 创建了问题 10月9日