正文 

当前位置： 首页 > java > java教程

用vue实现点击一个按钮，实现切换样式的效果

宁子 宁子     2022-12-23     276

关键词：

代码演示如下：(写的不好的地方，请见谅)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .yangshi1 
            background-color: aqua;
            width: 100px;
            height: 100px;
        
        
        .yangshi2 
            background-color: rebeccapurple;
            width: 100px;
            height: 100px;
        
    </style>
</head>

<body>
    <div id="div">
        <button @click="qiehuan">切换</button>//给一个点击事件
        <div v-bind:class=" yangshi1: ys1 ,yangshi2: ys2"></div>//这里是两个class，这里看不懂的话可以去看看Vue的官网的学习教程，有很详细的介绍
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var dianji = new Vue(
            el: "#div",
            data: 
                ys1: true,
                ys2: false
            ，//记得一定要用 “  , ”隔开，不然会报错的
            methods: 
　　　　//方法
                qiehuan() 
                    //当点击第一次时，ys1从true变为false,Style样式yangshi1就会隐藏
                    //再点击第二次的时候由false,变为true,显示样式
                    this.ys1 = !this.ys1
                        //代码运行到下面，值为false的时候，取反，就会为true，Style样式yangshi2就会显示
                        //这里到第二次点击的时候，就由true变为false，隐藏样式
                    this.ys2 = !this.ys2 　　//这里 “  ！” 是取反
                
            

        )
    </script>
</body>

</html>

用vue写一个轮播图效果

...。点击切换图片时把当前图片的下标赋值给currentIndex即可实现图片切换显示。二、定义变量三、模板渲染四、点击小圆点切换图片在li标签里执行一个点击函数，把当前下标值传进来。点击时设置currentIndex的值为当前的下标值。... 查看详情

怎么用vue实现点击图片(按钮)的波纹效果（涟漪动效）

参考技术A1.先是通过鼠标的点击事件的target属性获取点击的节点，获取该节点的宽和高（offset）2.通过layerX，layerY获取鼠标位置3.播放动画wave.vue 查看详情

css3的按钮怎么快速实现样式

...考技术A用CSS代码设定按钮的圆角样式，这个在css3中才能实现 查看详情

vue实现active点击图片切换

循环条件下:1.点击函数@click="active(index)"获取点击的位置  2.讲索引值传给class,点击哪一个则显示哪一个的样式  3.在data添加ins的初始值 4.使用三目运算符切换图片  三木运算符执行方法：如果index ==&nb... 查看详情

vue中改变背景图，实现点击切换效果

第一种v-bind:class="{active:item.isActive}v-on:click="doSomething"active是样式名,内容是红色背景.item.isActive在data中，为布尔值。doSomething在methods中，对item.isActive取反. 第二种<divid="playPage"class="blur"v-bind:style=" 查看详情

c#如何通过一个按钮实现窗体界面的中英文切换？

C#可以通过最基础简单的代码实现语言切换，新建一个工程，然后在视图的工具箱工具中，添加控件，通过按钮点击，实现中英文的切换。具体的方法如下：1.新建工程：工程都是从初始窗体上一点点搭建的，本例为新建空白默... 查看详情

38vue控制过渡效果(代码片段)

[动画]用Vue进行控制CSS制作的过渡效果编写CSS样式实现基本过渡样式Vue控制过渡效果编写CSS样式实现基本过渡样式我们先建立了一个transition的样式，这个样式用来执行过渡效果，具体意思是如果背景颜色background-color有变... 查看详情

vue循环了一组按钮怎么点其中一个按钮只修改这个按钮的样式？

参考技术A因为盒子是循环出来的，要实现循环div单独点击一个其他样式不变的效果，可以设定一个active值，默认是-1，点击就触发函数将i赋值给active从而实现当前div样式判断。 查看详情

怎么用bootstrap实现按钮切换效果

参考技术ABootstrap3中的按钮切换效果简明使用这个代码中介绍bootstrap3中的按钮切换状态效果，可以使用html中的data-toggle属性或者使用提供的javascript方法:$().button('toggle')来实现本回答被提问者采纳 查看详情

vue的v-show指令实现2种样式切换效果

参考技术A效果：htmlcss 查看详情

使用jquery实现不同按钮的切换选中效果(代码片段)

实现思路：使用JQuery的appCss()方法和removeClass()方法，通过给选中的按钮增添新的样式（选中效果样式），清除（或切换）未选中按钮的”选中效果样式“来达到选中效果截图：  代码如下：1<!DOCTYPEhtml>2<html>... 查看详情

wpf点击按钮时更改按钮样式界面效果的xaml实现方法

...。简单的解决方法就是通过VisualStateManager配合VisualState来实现实现效果如下，所有代码都是XAML代码实现方式为给B 查看详情

怎样用css实现div选中的效果

参考技术A你想要一个什么样的选中效果？以下是个红边框的样式div:hoverborder:1pxsolidred; 参考技术Bdiv:focus里面写你想要的选中效果样式 参考技术C不懂这儿的选中是鼠标点击还是覆盖或者是点击之后的效果,因此就都说一下:1.被点... 查看详情

android底部tab求大神帮写个

...天的这篇文章主要是以仿QQ空间的底部菜单栏效果为主，实现的效果有：<1>实现了点击按钮时的切换图片效果；<2>实现了点击按钮时的切换界面效果；<3>实现了点击中间圆形按钮时弹出菜单以及按钮图片切换效果；&... 查看详情

jquey实现轮播图效果(代码片段)

...这总结了一下轮播图基本的一些样式首先介绍一下，本文实现的轮播图的基本效果：　　　　1.3s自动切换图片,图片切换时提示点跟随切换 　　2.鼠标划到图片上，自动切换轮播图停止 　　3.指示点划过切换对应的图片，图片... 查看详情

androidcheckbox背景样式及用颜色值实现button点击效果

1?使用颜色值(不使用图片)来实现按钮的点击效果：color.xml?<colorname="head_color">#836FFF</color>???<colorname="information_title_color">#666666</color>???<colorname="list_bg_color">#FFF4F4F4&l 查看详情

javascript点击按钮实现隐藏显示切换效果

原文链接：http://www.jb51.net/article/79083.htm<html><head><metacharset="gb2312"><title>隐藏和显示</title><styletype="text/css">#thediv{width:200px;height:100px;line-height:1 查看详情

android一个activity里面放置多个fragment实现点击切换的tab页面效果

//BaseActivity是实现的一些公共的变量和方法，可以暂时为空的类publicclassHomeActivityextendsBaseActivityimplementsView.OnClickListener{//下面的四个按钮privateTextViewmHomeView;privateTextViewmPondView;privateTextViewmMessageView;pri 查看详情