js动态给当前点击元素添加css类

来源：互联网发布：php采集网页内容编辑：程序博客网时间：2024/06/05 21:17

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.实现效果：

并且每次只能选中一个。

0 0