vue 点击谁让谁变色（添加class属性）改变当前元素的样式

1.先设置一下要点中的样式

<style>.active {border: 6px solid #ff6c00;color: #ff6c00;background: #fff7e9;
}</style>

2. 然后就可以给我们的 li 添加点击事件

<ul id="app"><li v-for='(item,index) in items'    @click="change(index)"   :class='{ active:index===number}'>        <!--通过切换索引值改变class--><span v-html="item.name"></span></li></ul>

3.在methods内写我们的方法，这样就实现了我们想要点击哪个就给哪个添加样式啦

<script> new Vue({ el: '#app', data: {number: 0,    //注意此处items:[  {  name: "我是0", },  { name: "我是1"  },  {  name: "我是2"  }  ] },methods: {   change: function(index) {this.number= index;    //重要处} } }) </script>

vue 点击谁谁变色相关推荐

vue 点击切换导航标签，并左右滚动
vue做的导航栏,左右各有按钮,点击向左右滚动 vue做的导航栏,左右各有按钮,点击向左右滚动 Vue - 点击导航栏当前标签后变色功能(导航栏当前hover样式) Vue - 点击导航栏当前标签后变 ...
Vue导航点击路由跳转后样式不变
Vue导航点击路由跳转后样式不变 <template><ul><li :class="{active:isActive==1}" @click=&qu ...
vue点击ul中的li显示，点击其他地方隐藏
vue点击ul中的li显示弹框,点击其他地方隐藏弹框注意:ref="seatTipOperation" <ulref="seatTipOperation" ...
vue限制点击次数_vue点击切换颜色限制个数（用了mui框架）
vue点击切换颜色只能点击一个修改资料--类别类别保存 {{item.msg}} 最多可选择三项 mui.init() var categroy = new Vue({ el:'#categr ...
vue 点击文字input_vue input实现点击按钮文字增删功能示例
本文实例讲述了vue input实现点击按钮文字增删功能.分享给大家供大家参考,具体如下: content="width=device-width, user-scalable=no, in ...
js中点击按钮时变色，松开后恢复原来的颜色
js中点击按钮时变色,松开后恢复原来的颜色 // class.active{background: #1AB394;}//js<script type="text/javascript ...
vue点击网页全屏_vue中实现点击变成全屏的多种方法
项目中有点击按钮实现全屏功能方式一:js实现全屏全屏 data: data() { return { fullscreen: false }; }, methods: screen() { let ...
vue自定义弹窗dialog，vue 点击遮罩层功能区以外的地方关闭遮罩层
vue自定义弹窗dialog,vue 点击遮罩层功能区以外的地方关闭遮罩层 1.示例展示 2.代码 <template><div class="content"& ...
有多个按钮，点击一个变色，点击另一个变色，原来的恢复颜色的方法
之前用到网上说的fouce也可行,但是失去焦点后,点击别处按钮也会恢复颜色,所以这样也行不通.后来找了好久,这个方法终于行的通. html代码: 我是在table中加的按钮submit. <ta ...

vue 点击谁谁变色

vue 点击谁让谁变色（添加class属性）改变当前元素的样式

1.先设置一下要点中的样式

2. 然后就可以给我们的 li 添加点击事件

3.在methods内写我们的方法，这样就实现了我们想要点击哪个就给哪个添加样式啦

vue 点击谁谁变色相关推荐

最新文章

热门文章

vue 点击谁 谁变色

vue 点击谁 让谁变色（添加class属性）改变当前元素的样式

1.先设置一下要点中的样式

2. 然后就可以给我们的 li 添加点击事件

3.在methods内写我们的方法，这样就实现了我们想要点击哪个就给哪个添加样式啦

vue 点击谁 谁变色相关推荐

最新文章

热门文章

vue 点击谁谁变色

vue 点击谁让谁变色（添加class属性）改变当前元素的样式

vue 点击谁谁变色相关推荐