点击按钮切换div及其内容（两种方法：Vue指令方式、原生DOM操作方式）

最后

基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  width: 150px;
  height: 40px;
  border: 0;
  border-radius: 5px;
  color: white;
  margin: 20px 3px;
  background-color: #35cc8f;
}

/*选中时*/
.btn1 {
  width: 150px;
  height: 40px;
  border: 0;
  border-radius: 5px;
  color: white;
  margin: 20px 3px;
  background-color: #099941;
}

#content1, #content2, #content3, #content4 {
  background-color: #c1f8c9;
  height: 300px;
  font-size: 16px;
  line-height: 40px;
}

}

---


#### 方法二  使用DOM操作（不推荐，了解即可）


        **大致思路：**


        为每个按钮设置点击事件并传值，通过switch方法来控制选中项，选中后用DOM操作获取对应的元素并设置对应的属性和样式；


        完整代码如下：