需求是某一个页面内有 两个按钮 ，两个按钮分别显示不同的内容，打开页面默认第一个按钮是选中状态

技术栈：Vue3

实现思路，通过 v-if 动态切换选中和未选中两种状态的按钮
我们可以通过element按钮中的朴素状态为未选中

同时为两个按钮绑定 共同 的 @click 函数， 传入不同的实参 用于切换对应的页面

默认情况下 按钮1 的 v-if 绑定的value值为ture，而 朴素状态的按钮1 的 v-if 值为false
同时 按钮2 的 v-if 绑定的value值为false，而 朴素状态的按钮2 的 v-if 值为true

同时，如果点击 按钮1 ，那么四个按钮的状态都不会发生改变

如果点击 按钮2 ，那么四个按钮的状态都会切换成 相反值

即，点击 按钮2 ， 按钮1 的 v-if 绑定的value值变为fasle，而 朴素状态的按钮1 的 v-if 值为true，同时 按钮2 的 v-if 绑定的value值为true，而 朴素状态的按钮2 的 v-if 值为false

实现代码：

<div class="button">
<!-- 默认情况下按钮1的`v-if`绑定的value值为ture，而朴素状态的按钮1的`v-if`值为false -->
	<el-button type="primary" v-if="button1"  @click="changebutton(1)">按钮1</el-button>
	<el-button type="primary" v-if="button1plain" plain @click="changebutton(1)">按钮1</el-button>
</div>
<div class="button">
<!-- 按钮2的`v-if`绑定的value值为false，而朴素状态的按钮2的`v-if`值为true -->
	<el-button type="primary" plain v-if="button2plain" @click="changebutton(2)">按钮2</el-button>
	<el-button type="primary" v-if="button2" @click="changebutton(2)">按钮2</el-button>
	</div>
//v-if不同状态
const button1= ref(true)
const button1plain= ref(false)
const button2plain= ref(true)
const button2= ref(false)
const changebutton= (item) => {
//点击按钮1
	if (item == 1) {
	button1.value = true
	button1plain.value = false
	button2.value = false
	button2plain.value = true
	//点击按钮2
	if (item == 2) {
	button1.value = false
	button1plain.value = true
	button2.value = true
	button2plain.value = false
实现效果：
 
如上图所示，如果使用el-button,加颜色是可以通过设置type属性的值，加图标就设置icon属性的值。
现在产品给了一个需求，就是自定义的很多种类别，不同的类别的按钮显示不同的颜色和图标。如下图所示：
为了方便开发，目前的解决方案是：添加一个自定义全局指令，同时在element-ui源码中，加入对应的组件。开发人员在开发时只要在type中添加不同的类的值，就能添加上颜色和图标。
1、在element-ui的button源码中加了自定义指令otherRender，以及一个局部组件vRender
2、局部组件vRender的写法：
今天写项目，需要循环出select内的数据以后，页面一加载默认选中第一个数据，写完循环发现原本默认显示第一条的select框没变化，要选择后才有显示，结果查了好多文档，讲的都不是很清楚，自己研究了一下,发现很简单,记录一下。
一.初始效果
<template>
 <div class="statistical">
        <span>请选择店铺：</span>
				
html:
<input id="Radio1" type="radio" value="男" name="st_Sex" checked="checked"/>男                        <input id="Radio2" type="radio" value="女" name="st_Sex" />女
 $("#Radio1...
				
vue 不使用el-tab而是使用el-button实现点击按钮 按钮是选中状态列表内容进行切换
例子如下：
注意第一个el-button有id 意即这个button是默认选中的
<div class="zls-page-title">
   <el-button
     type="primary"
     plain
     id="zls-button-active"
     @click="checkByDocAuthority('all')"
<el-form-item label="状态：" prop="state">
          <el-select v-model="formData.state" placeholder="请选择用户状态">
            <el-option
              v-for="item in stateData"
              :key="item.valu
				vue3报错：runtime-core.esm-bundler.js:38 [Vue warn]: Invalid prop: type check failed for prop “modelVal
					66562
                Vue3报错：Property “xxx“ was accessed during render but is not defined on instance.
                    qq_42873938: 
                    把那个地方直接删了，vue警告太多了页面直接显示内存不足
                Vue3报错：Property “xxx“ was accessed during render but is not defined on instance.
                    前端小王hs: 
                    那就是其他的问题
                Vue3报错：Property “xxx“ was accessed during render but is not defined on instance.
                    qq_42873938: 
                    如果已经加上了，还是继续报错呢？
                Vue3+vite项目，保存代码后页面不刷新
                    TANMGA: 
                    我这里是: originalSlots[slotName] is not a function
                Vue3报错：Failed to resolve component: xx If this is a native custom element, make sure to exclude it f
                    weixin_47328207: 
                    组件版本引用错误也会出现这个警告
            Vue3报错：Extraneous non-props attributes (ref_key) were passed to component but could not be automatic
            2023三月最新精选前端面试题附解答思路
            Vue3+node.js实现同时上传图片与文字