博客

1.页面：

2.html代码：

  <div class="project-all">
    <template v-for='(index,project) in projectData'> 
      <div class="project" v-on:click='projectSelectFun($event,index)'>{{project.projectName}}</div>
    </template>
    <div class="project" v-if='addp' v-on:click='addproject'>新增项目</div>
    <div class="project" v-if='!addp'>
      <input type="text" class='name-input' placeholder='请填写项目名称' v-on:keyup.enter='saveProjectFun' v-el:addProject>
    </div>
  </div>

3.js代码：

<script>
export default {
  components: {

  },
  ready: function() {

  },
  methods: {
    projectSelectFun: function(e,index) {
      //标记选中的project,因为selected是动态加载的,所以用el无法拿到当前的dom,因此用querySelector
      var _dom = document.querySelector('.project.selected');
      if (_dom) {
        _dom.classList.toggle('selected');//当class为project的元素上没有这个CSS类时，它就新增这个CSS类；如果class为project的元素有了这个CSS类，它就是删除它。就是反转操作。
      }
      e.target.classList.toggle('selected');
      this.searchData.params.project = this.projectData[index].id;
    },
  },
  data() {
    return {
      addp: true, //是否显示添加项目
      projectData: [{
        id: '001',
        projectName: '假数据1'
      }, {
        id: '002',
        projectName: '假数据2'
      }, {
        id: '003',
        projectName: '假数据3'
      }, {
        id: '004',
        projectName: '假数据4'
      }, {
        id: '005',
        projectName: '假数据5'
      }, {
        id: '006',
        projectName: '假数据6'
      }, {
        id: '007',
        projectName: '假数据7'
      }, {
        id: '008',
        projectName: '假数据8'
      }],
      typeData: [{
        id: '1',
        typeName: '需求'
      }, {
        id: '2',
        typeName: '问题'
      }],
    }
  }
}
</script>

4.实现效果：

并且每次只能选中一个。