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

秒客网