发表于： 2020-07-27 21:55:26
1 2270
今日完成:
侧边栏标题及标题里的子选项，合起来的单选框效果
开始想法：
每个选项框，都添加相同的类,把它们联系起来
然后类设置背景颜色,初始是false,点击后改变类的显隐
<div :class="{sidebarTitle:true,active:change}"
...
change:false
...
methods:{
changeBackground(){//1.设置一个函数
let active = document.getElementsByClassName("active");//2.绑定所有目标类,的到数组
for(let i = 0;i < active.length;i++){//3.用for循环,为数组的每个值设定点击事件
active[i].onclick = function(){
this.change = true
console.log(i)
}
问题1:
同一设置change代表类的显隐,点击后背景类是全部同时显现和隐藏,逻辑不对
解决:把初始类active设置为空,绑定含有active类的元素,联系起来,通过for循环来绑定点击事件
先给每个active的值清空,再为当前点击的元素的active类添加背景颜色值
问题2:
这种写法设置的点击事件无效,
原因:可能和闭包之类的有关,先待定,完成为住
解决;通过相同类把目标(类单选)元素相互联系起来,分别绑定相同的点击事件
用for循环先遍历清空每个;元素active类的值,在为当前点击的元素添加背景颜色
问题3:
一个事件绑定多个函数
<div :class="{sidebarTitle:true,active:''}" @click= "ones" @click=" changeBackground(obj)">
这样写报错
解决:
查询的同一事件(点击)绑定多个函数（方法)
一个事件绑定多个函数，按顺序执行，这里分隔函数可以用逗号也可以用分号
@click= 'ones,changeBackground(this)'
但是，这里我设置无效
原因：this在原生js中这样写,是指向当前dom元素的,在vue中是无效的
解决:换成指向当前vue中指向当前元素的参数
@click= 'ones,changeBackground($event.target)'
错误:包含目标元素的子元素,改变背景颜色作用在子元素上
解决: 把一个函数写到另一个函数内部,有参数指定参数
threes(ww){
this.three = !this.three
this.two = false
this.one = false
this.changeBackground(ww)
}
注意:
1.形参的参数书写不能添加.
2.<router-link to="/mokuai" :class="{sidebarP:true,active:true}" tag= "p" @click="changeBackground()">模块管理</router-link>
router-link中的tag="p"只是类p标签,可以添加class类,但是不能添加绑定事件,添加需要在标签内部添加如p标签,
然后为p标签添加点击事件
1.这种写法到这,就不知道该怎么写了,要在实参中带入点击后指向当前节点的实参,且要配置不能包裹包含的子元素
这里就是因为包含子元素,且点击子元素它的背景颜色也会单独改变,且无法消除失败
2.vue目的就是减少dom操作的,这样写也不好
在vue中可以在data中写入数据,然后用v-for遍历出手风琴
这样点击可以获得数组元素的索引值index
然后点击获的参数index参数
<p :class="[sidebarPClass,active == index?'active2':'active1']" @click =active(index)
来知道点击的哪一项
但是我这里是直接写出来的,没法获取索引知道点击的哪一项,只能手动每个给定值判断
只能做每个都做判断
<p :class="[sidebarPClass,active == 9?'active2':'active1']" @click = 'ac9'>职位列表</P>
ac9(){
this.active=9
},
赋值这么写
返回列表
评论