vue学习笔记6——一些思想的自我理解
来源:互联网 发布:误删除 mysql数据恢复 编辑:程序博客网 时间:2024/05/22 01:45
vue学习笔记6——一些思想的自我理解
在vue学习中,多注重vue思想,不要直接操作dom
只有在极少数和个别情况下,需要直接操作dom
如果要操作dom请用原生js,直接进行节点的操作
在
methods: { top_nav_sel: function (id) { this.selected = id }
中
this是一个vueComponent(vue组件),无法直接进行dom操作
类似实现选项卡样式改变
思路:利用vue的渲染自动增减class
li a 中绑定监听class,点击时,函数定义
v-on:click="top_nav_sel(item.id)"v-bind:class="{ fouce: selected === item.id }"
初始在data()的return中定义selected: ”,
在其中li的text的定义时,添加id一项
最后在
methods: { top_nav_sel: function (id) { this.selected = id } }
剩下的就是添加一个监听就可以了
整体就是
在循环生成a的时候,每一个给了一个类似id的表示,作用和name一样
这个id作为监听点击事件的函数的参数
监听一个class,当这个class为true时显现
selected === item.id恒等于,保证为true,在data中定义selected和id
在函数中,以id为参数
把当前点击的选中项的id传给this.selected
也就是初始时候的selected
从而保证了恒等式的成立
而且只会渲染当前点击的li a
“id”绑定,结果使然
阅读全文
3 0
- vue学习笔记6——一些思想的自我理解
- vue学习笔记2——部分词名及一些定义的理解
- 关于vue的一些自我心得
- activity的一些自我理解
- 学习笔记----最大流的学习心得与自我理解
- 程序员的自我修养学习笔记——静态链接
- 多态,虚函数的一些自我理解
- UML图的一些自我理解
- 对于功能需求的一些自我理解
- UFLDL笔记——自我学习
- C#学习笔记一 设计思想的理解
- Android学习笔记---Layout的一些理解
- Vue——核心思想
- 学习vue的一些资源
- 学习vue的一些资源
- 关于Vue生命周期的一些理解记录
- Vue的一些API理解整理
- Java学习——对象的序列化和反序列化(自我理解)
- PHP防盗链
- 带有重叠布局的效果
- 数据库备份,数据库镜像,数据库读写分离的介绍
- H5消除transition闪屏
- Maven学习总结(九)——使用Maven构建多模块项目
- vue学习笔记6——一些思想的自我理解
- Android 拍照功能详解
- Java并发编程:阻塞队列
- SqlServer事务语法及使用方法
- 5同步容器类
- js获取设备操作系统
- VNC连不上服务器,无法远程控制
- GPIO原理
- MySQL Query Cache 看上去很美