用vue制作标签满足如下条件： 1.根据鼠标点击事件来控制标签颜色2.不同的按钮切换不同的背景

最新推荐文章于 2024-03-17 22:29:00 发布

青云--

最新推荐文章于 2024-03-17 22:29:00 发布

阅读量515

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/yinjun3215/article/details/107989987

版权

用vue制作标签满足如下条件：
1.根据鼠标点击事件来控制标签颜色，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>根据次数定义颜色</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        <p :style="defaultStyle" @click="f1">{{counted}}</p>
    </div>

    <script type="text/javascript">

        new Vue({
            el:'#app',
            data:{
               counted:0,
               b1:'red', //点击一次 红色  四次  1 4 7 
               b2:'green',//二次  5   8
               b3:'blue',//三次   6   9
               defaultStyle:{
                    width:'300px',
                    height:'300px',
                    background:'pink',
               }
            },
            methods:{
               f1(){
                   this.counted+=1;
                   if(this.counted %3 == 1){
                        this.defaultStyle.background = this.b1;
                   }else if(this.counted %3 == 2){
                        this.defaultStyle.background = this.b2;
                   }else{
                        this.defaultStyle.background = this.b3;
                   }
               }
            }
        })


    </script>
</body>
</html>

2.不同的按钮切换不同的背景，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>切换背景</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        <p :style="defaultStyle">我是块状元素</p>


        <button @click="f1">红色</button>
        <button @click="f2">绿色</button>
        <button @click="f3">蓝色</button>
    </div>

    <script type="text/javascript">

        new Vue({
            el:'#app',
            data:{
               b1:'red',
               b2:'green',
               b3:'blue',
               defaultStyle:{
                    width:'300px',
                    height:'300px',
                    background:'pink',
               }
            },
            methods:{
                f1(){
                    this.defaultStyle.background = this.b1;
                },
                f2(){
                    this.defaultStyle.background = this.b2;
                },
                f3(){
                    this.defaultStyle.background = this.b3;
                }
            }
        })


    </script>
</body>
</html>

青云--

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用vue制作标签满足如下条件： 1.根据鼠标点击事件来控制标签颜色2.不同的按钮切换不同的背景

用vue制作标签满足如下条件：1.根据鼠标点击事件来控制标签颜色，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>根据次数定义颜色</title>
复制链接

扫一扫