vue.js li 切换样式

最新推荐文章于 2024-03-21 17:47:25 发布
最新推荐文章于 2024-03-21 17:47:25 发布
阅读量3.5k 收藏 7
点赞数 1
分类专栏： VUE 文章标签： 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangzongyang1025_/article/details/82049144
版权 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>选中效果</title>
<script src="./vue.min.js"></script>
<style>
    ul li {
        text-decoration: none;
    }
    ul li.active{
        color: red;
    }
</style>

</head>
<body>

<div id="app">
<ul>
    <li v-for="items in navList" :class="{active:items.isActive}" @click="activeFun(items)">
        <a>
            {{items.text}}
        </a>
    </li>
</ul>
</div>

<script>
new Vue({
    el: '#app',
    data: {
        navList: [
            {text: '谷薯类及其制品', isActive: true},
            {text: '蔬菜类', isActive: false},
            {text: '豆类及豆类制品', isActive: false},
            {text: '肉类', isActive: false}
        ]
    },
    methods: {
        activeFun: function(data){
            this.navList.forEach(function(obj){
                obj.isActive = false;
            });
            data.isActive = !data.isActive;
        }
    }
});
</script>

</body>
</html>
月落星河°
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
动态改变li标签样式
07-25
<script> function change(obj){ var arrayli = obj.parentNode.getElementsByTagName("li"); //获取li数组 for(i=0;i<arrayli.length;i++) { arrayli[i].className=""; if(obj==arrayli[i]) { obj.className="test"; } } } </script>
关于vue :style 的几种使用方式
热门推荐
u010227042的博客
11-09 11万+
:style的使用 一 ,最通用的写法 1 <p:style="{fontFamily:arr.conFontFamily,color:arr.conFontColor,backgroundColor:arr.conBgColor}">{{con.title}}</p> 　　 二， 三元表达式 1 <a:style="{color:(index==0?arr.conFontColor:'#00...
Vue指令快速上手
小旺的博客
11-15 1284
Vue指令快速上手 模板语法 显示普通文本 <span>消息内容：{{ msg }}</span> JavaScript表达式 {{ msg.split('').reverse().join('') }} {{ result >0 ? 'YES':'NO' }} 演示： <template> <div class="hello"> <h1>第一个全局组件</h1> <ul> <li
前端ul好看的li列表样式
最新发布
amoureux555的博客
03-21 569
前端ul好看的li列表样式
Vue入门及简单使用_样式控制-style_class_条件渲染_列表渲染_事件处理_数据双向绑定_表单控制
qq_31455841的博客
12-15 377
Vue 入门 1. 样式控制 1. style和class的控制 1. class的三种控制方式 # 样式 <body> <div id="box"> <h1>class的三种写法</h1> <div :class="isActive?'red':'green'">class三目写法</div> <p :class="classObj">class对象写法</p> <p :class="class
vue2使用ul，li实现下拉列表
Leviathan_gy的博客
12-09 1375
用组件库的时候样式修改起来又很麻烦，原声下拉列表options又无法添加样式，也没法做复杂处理，所以使用以下方式实现下拉列表 下拉，收起的icon自行更换 <template> <div > <div class='team-list'> <div class='team-name' @click='nameClick()'> <div>{{message}} &lt
Vue学习——实现点击列表改变颜色
weixin_47633384的博客
02-08 4028
Vue实现点击列表改变其中一项的颜色需求代码解决思路完整代码成果图注意事项1. 方法中 this.isActive 的赋值2. isActive 值的设定有点讲究 需求 简单实现点击列表其中一项，改变其颜色 代码 解决思路 首先设定想要改变的颜色 <style> .active{ color: red; } </style> 使用 v-for 实现列表展示，v-bind 动态绑定 class，v-on:click 实现点击事件。 设置
VUE点击切换样式
crsitin_spade的博客
07-06 6361
2020年7月6日，晴，今天又是炎热的一天，无聊的我 积极的我来写一篇博客吧。 |ू･ω･` ) 我们需要先写好内容，还有样式 <div id="app"> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> <li>ddd</li> </ul> </di
vue中如何实现样式之间的切换
积少成多
02-08 3万+
欢迎访问我的个人博客 http://xiaolongwu.cn/ 前言 既然我们选择了vue，那么在做东西时就不要想着再jQuery用去操作dom，所有的都交给vue来解决。 下面来说一个很简单但是很常用的效果，可能人人都会遇到这样的需求 请看下图 导航栏的样式切换功能，如果我们使用jquery之类的东西来写，可能要写好多代码，那么我们用vue呢， 代码如下 ht...
vue样式切换
m0_70722541的博客
04-27 298
2.template的img标签里定义图片样式。样式的值可以是方法（可以传参），也可以是变量，这里使用方法。3.script的method里写isPdf方法，方法里返回ture和false布尔值。假设一个图片是pdf格式显示一种样式，是其它格式显示另一种样式。1.style里定义一个pdf的样式和一个imgs的样式。2.组件的模板部分（template）3.组件的js部分（script）1.组件的样式部分（style）
vue 切换元素样式
ChaoChao66666的博客
03-24 1072
比如我要通过点击按钮来实现图片是否在旋转，效果如下： 实现：:class="{active: 布尔值}" <img class="playImg" :class="{active: isPlay}" :src="playDetail.al.picUrl"> 然后设置两个不同的css： .playImg{ width: 3.4rem; height: 3.4rem; border-radius: 1.7rem; position: absolute;
vue实现样式之间的切换及vue动态样式的实现方法
12-29
前言 既然我们选择了vue，那么在做东西时就不要想着去操作dom，所有的都交给vue来解决。 下面来说一个很简单但是很常用的效果，可能人人都会用到这样的需求 请看下图 导航栏的样式切换功能，如果我们使用jquery之类的东西来写，可能要写好多代码，那么我们用vue呢， 代码如下 html 附上vue中style与class绑定API <div v-for=(list,index) in navLists class=nav :class={ red:changeRed == index} @click=reds(in
Vue2.0点击切换类名改变样式的方法
12-10
1、使用index <!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>vue导航</title> <style media="screen"> *{ margin:0; padding: 0; } ul li{ list-style:
vue.global.js，Vue.js 框架的核心文件之一
08-11
`vue.global.js` 文件是 Vue.js 框架的核心文件之一。它包含了 Vue.js 全局对象的定义和一些全局方法和属性的实现。 该文件对整个 Vue.js 应用的运行起着重要的作用，它提供了全局范围的 Vue 构造函数和一些全局...
vue.js和vue.min.js
06-13
vue.js和vue.min.js
v2.6.10-vue.js&vue.min.js&vue.common.js&vue.runtime.js等14个资源
03-12
内容：vue.js、vue.min.js、vue.common.js、vue.common.dev.js、vue.common.prod.js、vue.esm.browser.js、vue.esm.browser.min.js、vue.runtime.js、vue.runtime.min.js、vue.runtime.esm.js、vue.runtime.common....
vue.min.js官方2.6.14版本
03-11
vue.min.js官方2.6.14版本
vue.js项目实战,vue.js项目实战pdf下载,JavaScript
09-10
vue实战开发.快速上手.好不容易找到电子版.非PDF版
vue中使用vant中TreeSelect 分类选择组件
月落星河
12-31 2万+
在vue中使用vant中TreeSelect的组件 中文文档：TreeSelect 分类选择 效果展示： //先在你需要的页面中引入，第一个是弹出层,第二个是选择的 import { Popup } from "vant"; import { TreeSelect } from "vant"; 代码部分： <van-popup v-model="policeShow" ...
用Vue.js写一个轮播图格式
06-06
好的，以下是一个基于 Vue.js 的轮播图实现示例： HTML 代码： ```html <div id="app"> <div class="slider"> <transition-group name="fade" tag="ul"> <li v-for="(img, index) in imgs" :key="index" v-show="currentIndex === index"> <img :src="img"> </li> </transition-group> <div class="slider-nav"> <a v-for="(img, index) in imgs" :key="index" href="#" @click.prevent="show(index)" :class="{ active: currentIndex === index }">{{ index + 1 }}</a> </div> </div> </div> ``` CSS 代码： ```css .slider { position: relative; overflow: hidden; } .slider ul { list-style: none; margin: 0; padding: 0; position: relative; } .slider ul li { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s ease-in-out; } .slider ul li img { width: 100%; height: 100%; object-fit: cover; } .slider-nav { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); text-align: center; } .slider-nav a { display: inline-block; width: 24px; height: 24px; line-height: 24px; border-radius: 50%; background-color: #ccc; margin: 0 8px; color: #fff; text-align: center; font-size: 14px; text-decoration: none; transition: background-color 0.5s ease-in-out; } .slider-nav a.active, .slider-nav a:hover { background-color: #f60; } .fade-enter-active, .fade-leave-active { transition: opacity 0.5s ease-in-out; } .fade-enter, .fade-leave-to { opacity: 0; } ``` JavaScript 代码： ```javascript new Vue({ el: '#app', data: { imgs: [ 'img1.jpg', 'img2.jpg', 'img3.jpg' ], currentIndex: 0 }, methods: { show: function(index) { this.currentIndex = index; }, showNext: function() { this.currentIndex = (this.currentIndex + 1) % this.imgs.length; } }, mounted: function() { // 自动播放 setInterval(this.showNext, 3000); } }); ``` 这个轮播图实现了自动播放、导航点击切换图片等功能，使用了 Vue.js 中的动态绑定和过渡效果。你可以替换 HTML 代码中的图片地址和 CSS 代码中的样式来适应你的需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

月落星河°

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值