vue学习笔记6——一些思想的自我理解

时间:2021-07-21 10:50:20

vue学习笔记6——一些思想的自我理解

在vue学习中,多注重vue思想,不要直接操作dom

只有在极少数和个别情况下,需要直接操作dom

如果要操作dom请用原生js,直接进行节点的操作

methods: {
      top_nav_sel: function (id) {
        this.selected = id
      }

this是一个vueComponent(vue组件),无法直接进行dom操作

类似实现选项卡样式改变

vue学习笔记6——一些思想的自我理解

思路:利用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一项

vue学习笔记6——一些思想的自我理解

最后在

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”绑定,结果使然