Vue的排他思想

已于 2022-06-29 11:42:03 修改
阅读量1.4k 收藏 5
点赞数 2
文章标签： vue.js javascript 前端
于 2021-10-29 15:52:43 首次发布
原文链接：https://blog.csdn.net/llt299022/article/details/115186929
版权 
<!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>
        .active {
            color: red;
        }
    </style>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <!-- 先for循环遍历  movies， class active：true 默认值是0   监听点击事件itemClick(索引号) -->
            <li 
            v-for="(item,index) in movies" 
            :class="{active: index===currentIndex}" 、
            @click="itemClick(index)">{{item}}</li>
        </ul>
    </div>

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                movies: ['海王', '海尔兄弟', '进击的巨人', '火影忍者'],
                currentIndex: 0
            },
            methods: {
                // 点击后把index传给 currentIndex
                itemClick: function(index) {
                    this.currentIndex = index
                }
            }
        });
    </script>
</body>

</html>
仙女不下凡
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue —— 排他思想
weixin_54966486的博客
05-02 1568
思路 在收集数据 spuImageList:[], 中加一个控制变量 isDefault ，利用 v-if 、v-else 进行排他 <template> <el-form> <el-form-item label="图 片 列 表"> <el-table style="width: 100%" border :data="spuImageList" @selection-change="handleSelectionChange"&gt..
Vue设计思想
weixin_45135907的博客
08-19 1263
Vue的组件化思想 一个组件就是一个模块，每个模块都是独立的。组件化这个特点可以把一个网站甚至一个页面分成一个一个的小模块（即组件）。每个组件也是完整的，他包含整个组件需要的业务逻辑和样式。每个组件都可以很方便实现复用，很方便的维护。 例如： 上次创建Vue项目，运行以后显示： F12 -> Elements板块 可以看到当前页面的元素标签组成： 再看当前项目的文件目录。其实这个页面并不...
Vue中的排他思想案例
llt299022的博客
03-24 2102
<!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>Do
vue经典思想(排他思想,全选框思想)
qq_38806666的博客
12-03 1130
vue经典思想(排他思想,全选框思想)
vue排他思想
记录学习前端的历程
06-12 289
排他思想，vue2语法
Vue手动实现排他功能
qq_40052237的博客
09-05 3542
效果样式： 其效果就是当用户点击某个按钮高亮他，其他的变灰色，这就是一个典型的排他功能。 利用Vue当中动态绑定css的方式就可以很好的实现它： <style> .nav { list-style: none; display: flex; justify-content: space-between; background-color: #66ccff; }
VueTab案例.rar
04-30
Vue小案例——Tab选项卡 通过v-for将数据渲染到页面中，为每个v-for渲染出来的 li 添加点击事件，运用排他思想
vueDevTools
07-04
VueDevTools 是一款非常强大的前端开发工具，专为Vue.js和基于Vue的框架如UniApp设计，用于提升开发过程中的调试效率。它允许开发者在浏览器的开发者工具中直接查看和操作Vue应用程序的状态，帮助理解数据流、组件...
尚硅谷vue3.0笔记
05-30
尚硅谷vue3.0笔记
vue-devtools
01-05
Vue Devtools Vue-devtools是一款浏览器扩展程序，用于调试Vue.js应用程序。它允许开发人员在浏览器开发者工具中检查运行中的Vue应用程序的状态，包括Vue实例、Vuex存储和Vue路由器状态。使用Vue-devtools，开发...
vue 画布 vue-fabric-drawing
最新发布
02-20
1. **Vue 组件化思想**：Vue.js 的核心特性是组件化，Vue Fabric Drawing 将画布功能封装成一个可复用的 Vue 组件。开发者可以像使用其他 Vue 组件一样，在自己的项目中轻松引入并配置这个画布组件。 2. **Fabric....
vue中nav导航栏的排他思想+节流思想（lodash库）
weixin_49931650的博客
03-10 712
排他思想： 选择nav导航栏中一个子类，变色，并让其他子类不变色 节流思想和防抖： 节流：间隔时间，用户操作频繁，但是把频繁操作变为少量操作，少量操作还在间隔时间后执行，间隔之间内不会执行 例如王者技能：频繁点击，有时间做间隔，点击后，必须等这么一段时间才能使用 防抖：规定时间，用户操作频繁，但是只是执行最后一次，之前的回调会取消 例如王者回城：频繁点击，但是只是规定时间内最后一次点击才成功，之间
vue实现排他功能 - 项目需求
不想起床
02-24 2318
先看原来的鸟样 我也不知道当时人家做的时候，是怎么想的，显示不了完整的，用省略号代替正常，但是人家想看详细信息，却死活点不开，是什么鬼？ 所以 给我提了一个需求，就是点击详细信息，当前的展开，当点击下一个详细信息，上一条信息关闭，当前的展开，这…不就是排他效果吗？ 之所以内容显示两行，超出部分隐藏，是因为用了如下代码 text-overflow:ellipsis; d...
【Vue】排他思想
qq_40992225的博客
08-03 361
我们可以通过对象的方式，后面跟上布尔值，通过修改布尔值的方式，从而达到动态绑定的效果。之后我们要做的就是监听点击，一旦我们发现了它点击了以后，我们就把点击的这个index赋值给currentIndex，进行一个展示就可以了。此时这个当前点击的小li它的布尔值就为true，这个时候就是点击哪一个那一个就变红。首先我们拿到每个li它的item和index，然后动态绑定class属性，用一个。而此时我们默认的index就是0，所以默认的第一个movies颜色会变红。它具体是怎么实现的呢？...
关于vue中如何实现排到他思想
weixin_33778778的博客
12-12 1483
最近在做vue项目需要做到排他思想，本来如果用jq做很简单的一件事，到了vue里面也是挺简单的(<li v-for="(listRenderingList,index) in listRenderingLists" v-on:click="onclick(index)" v-bind:class="{active:index==dynamic}">{{index}})。这种写法相信很...
Vue/Vue案列(计数器 、排他思想)
m0_64494670的博客
10-20 306
Vue/Vue案列(计数器 、排他思想)
Vue实现切换效果【排他思想】
m0_72687687的博客
09-23 438
Vue实现切换效果【排他思想】
Vue项目中常见问题(34)产品售卖属性值排他操作
qq_46368050的博客
05-21 172
目录 gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master 业务需求1: 1.找到对应的结构 2.绑定单击事件 gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master 大家根据上传历史进行查找你需要的代码 业务需求1: 我们想要点击哪个按钮,哪个按钮就有高亮,所以我们用到了排他操作 1.找到对应的结构 在pages/Det.
vue中如何使用排他思想
07-10
在Vue中使用排他思想，可以通过以下几种方式实现： 1. 使用v-if或v-show指令：您可以根据条件来决定显示或隐藏某个组件或元素。通过给多个组件或元素设置不同的条件，可以实现只显示其中一个的效果。例如： ```html <div v-if="selectedTab === 'tab1'">Tab 1 content</div> <div v-if="selectedTab === 'tab2'">Tab 2 content</div> <div v-if="selectedTab === 'tab3'">Tab 3 content</div> ``` 2. 使用计算属性：您可以根据条件返回特定的组件或元素。通过在计算属性中判断选中的标签，然后返回对应的内容，可以实现排他性。例如： ```html <template> <div> <component :is="selectedTabComponent"></component> </div> </template> <script> export default { data() { return { selectedTab: 'tab1' }; }, computed: { selectedTabComponent() { if (this.selectedTab === 'tab1') { return 'Tab1Component'; } else if (this.selectedTab === 'tab2') { return 'Tab2Component'; } else if (this.selectedTab === 'tab3') { return 'Tab3Component'; } } } }; </script> ``` 3. 使用Vue Router：如果您的排他性是在不同的路由之间切换，您可以使用Vue Router来实现。通过定义不同的路由，并使用`<router-view>`来渲染当前路由的组件，可以实现排他性。例如： ```html <template> <div> <router-link to="/tab1">Tab 1</router-link> <router-link to="/tab2">Tab 2</router-link> <router-link to="/tab3">Tab 3</router-link> <router-view></router-view> </div> </template> <script> import Tab1Component from './Tab1Component.vue'; import Tab2Component from './Tab2Component.vue'; import Tab3Component from './Tab3Component.vue'; export default { components: { Tab1Component, Tab2Component, Tab3Component } }; </script> ``` 以上是几种在Vue中实现排他性的方法。您可以根据具体情况选择适合您的方式来实现。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值