Drcus | 王亚振

Drcus | 王亚振

随便写,记录点东西

Vue 列表选中效果

发布于:  

今天在用 Vue 渲染一个列表 做一个选中效果, 图

用angular的时候给对象的active 修改值从而来渲染页面, 但是在 vue中不好使了

最后查出来是因为 vueangular的数据监测方式不同, 所以vue 给对象新增了active属性后没有更新视图

angular 更新是脏值检测轮询, Vue则是通过对象的set get构造函数来触发的视图更新, 本质上的更新机制不同

使用的这种方法

data () {
    return {
      menus: [
        {text: '公司管理', path: '/company', icon: 'glyphicon-briefcase', active: false},
        {text: '物料管理', path: '/material', icon: 'glyphicon-pushpin', active: false},
        {text: 'BOM管理', path: '/bom', icon: 'glyphicon-tasks', active: false},
        {text: '制令单管理', path: '/order', icon: 'glyphicon-list', active: false},
        {text: '工序', path: '/process', icon: 'glyphicon-retweet', active: false},
        {text: '绑定成品码', path: '/qrcode', icon: 'glyphicon-copyright-mark', active: false},
        {text: '绑定箱号', path: '/cartonNo', icon: 'glyphicon-th', active: false}
      ]
    }
  }

厚颜一下 ~^_^~

赏赐