vue中点击div里的当前元素添加class删除其他兄弟元素的class

大体思路：声明一个初始变量currentIndex，为0 就是第一个，为1就是第二个默认显示。点击的时候传入的currentIndex=index

html:

js:

css:

延伸拓展：

同样道理的，点击父级，改变对应子集的class，要如何做呢~

html:

注意：由于是循环，所以在最外层要套个<div>

js:

这个你可以换种思路，用一个变量来控制显示样式，官网上面也有说。当这个变量为true时，说明有这个样式，当变量为false时则没有这个样式。

>

vue是一款渐进式JavaScript前端框架，三大mvvm框架 vue , react ,angular

el: 选择目标标签

data: 数据

methods: 方法

computed: 计算

directives: 指令

watch: 监听

{{}}

v-text

v-html(渲染html文本)

v-bind:属性="指令的值"

例：

缩写：:属性="值"

指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回 真 值的时候被渲染。

用于根据条件展示元素的选项是v-show指令

v-if隐藏时直接移除节点，v-show是通过css方式隐藏

频繁切换用v-show，一次性切换用v-if

我们用v-for指令根据一组数组的选项列表进行渲染。v-for指令需要使用 item in list 形式的特殊语法，list是源数据数组

v-on:事件类型="响应函数"

简写：@click="say()"

行内事件响应：@click="num++"

stop 阻止事件冒泡

prevent 阻止默认事件

once 只执行一次

up

down

left

right

delete

enter

space

esc

tab

v-model 让表单的值与数据绑定在一起。他会根据空间类型自动选取正确的方法来更新元素

多选

{{checked}}

:class="值"

:class="{'key1':true,'key2':false}"

key1的值为真，key1会被绑定，key2不会

:class="[c1,c2,c3]"

:style="{color:'red','fontSize':'44px'}"

注意： 此时的属性名要去掉-连接符，且下一个字母要大写

例：fontSize字体大小

bind: 只调用一次，指令第一次绑定到元素时执行

inserted: 被绑定元素插入父节点时执行

update: 每更新执行一次

格式化数据

使用：

1、{{num | fix}}

2、{{num | fix(2)}}

3、v-text="num | fix"

两个状态间的过渡变化

vue动画需要在内置组件 <transition></transition> 包裹，会自动在动画的进入过程与离开过程添加类名，真正要实现动画，还需要自己写css

transition

name 名称

model 模式

in-out 先进再出

out-in 先出再进

enter-active-class 指定进入类名

leave-active-class 指定离开类名

transition-group

v-enter-active 进入过程

v-enter 进入前

v-enter-to 进入后

v-leave-active 离开过程

v-leave 离开前

v-leave-to 离开后

1、动画类6个css创建

2、keyframes 关键帧

3、引入第三方动画库 指定进入的class与离开的class

Vuecomponent("组件名",{template:``})

const steper = {template:``}

组件有且只能有一个根节点

<steper></steper>

使用id来识别唯一的元素是合理的，但是用class更好，因为class可以用来指定一组元素，而id只能指定一个元素。在Vue中，使用class更方便，可以使用绑定的class来管理元素的样式，而使用id则没有这种灵活性。因此，在Vue中，最好使用class而不用id。

以上就是关于vue中点击div里的当前元素添加class删除其他兄弟元素的class全部的内容，包括:vue中点击div里的当前元素添加class删除其他兄弟元素的class、VUE3中Class 与 Style 绑定、Vue绑定class与绑定内联样式--v-bind等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！