vue使用v-show数据改变怎么重新渲染

2025-10-23 16:26:08

1、打开HBuilderX工具,创建vue项目;然后在指定文件夹下,新建vue文件

vue使用v-show数据改变怎么重新渲染

2、打开vue文件,利用element进行页面布局;然后插入单选按钮和下拉框

vue使用v-show数据改变怎么重新渲染

3、在script标签中,添加data对象,并初始化变量showHide和options

vue使用v-show数据改变怎么重新渲染

4、在el-radio-group标签上绑定change事件,el-select标签上添加v-show指令

vue使用v-show数据改变怎么重新渲染

5、在data对象下的return中,添加isShow布尔变量,设置为true

vue使用v-show数据改变怎么重新渲染

6、在methods中,定义单选按钮的change事件函数changeData,根据值不同,切换isShow,重新加载options

vue使用v-show数据改变怎么重新渲染

7、保存代码并运行项目,打开浏览器,查看单选按钮和下拉框

vue使用v-show数据改变怎么重新渲染

8、点击单选按钮,勾选隐藏,下拉框隐藏起来了

vue使用v-show数据改变怎么重新渲染

9、再次点击显示单选框,下拉框显示出来,但是展示的项目发生了改变

vue使用v-show数据改变怎么重新渲染

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢