vue点击按钮关闭当前页面,vue点击按钮改变按钮内容
本文主要介绍在vue中点击切换按钮的功能。启用该按钮后，它将被禁用。本文通过示例代码为您做了非常详细的介绍，对您的学习或工作有一定的参考价值。请有需要的朋友参考一下。
该方法分为三个步骤：
在模板中设置两个按钮，分别由v-if和v-show控制；
在数据中设置按钮的默认值；
方法控制单击按钮的切换效果。
模板
el表
:data=tableData
边界
style=宽度：100%
El-表格-列
固定的；不变的
prop=date
标签=日期
宽度=200
/El-表格-列
El-表格-列
prop=state
Label=“状态”
宽度=150
/El-表格-列
El-表格-列
prop=name
Label= name
宽度=120
模板槽-范围=“范围”
El-input placeholder=请输入内容 v-show= scope . row . show v-model= scope . row . name
/el-input
span v-show=！scope . row . show“{ scope . row . name }”
/span
/模板
/El-表格-列
El-表格-列
省
Label=省
宽度=120
/El-表格-列
El-表格-列
prop=城市
Label=市区
宽度=120
/El-表格-列
El-表格-列
prop=地址
Label=地址
宽度=300
:show-overflow-tooltip=true
/El-表格-列
El-表格-列
prop=zip
Label=邮政编码
宽度=120
/El-表格-列
El-表格-列
固定=右
Label=“操作”
宽度=300
模板槽-范围=“范围”
El-button @ click= handle click(scope . row) type= text size= small 视图/el-button
El-button @ click= scope . row . show=true type= text size= small 编辑/el-button
El-button @ click= scope . row . show=false type= text size= small save/El-button
El-button @ click= change status type= text size= small v-if= BTN status==0 enable/El-button
El-button @ click= change status type= text size= small v-show= BTN status==1 disable/El-button
/模板
/El-表格-列
/el-table
/模板
脚本
导出默认值{
方法：{
手柄单击(行){
console . log(row)；
},
changeStatus(){
this . BTN status=this . BTN status===0？1 : 0;
}
},
data() {
返回{
btnStatus: 0，
表数据：[{
日期：“2016年5月2日”，
姓名：王小虎，王小虎，王小虎，王小虎，王小虎，王小虎，王小虎，王小虎，王小虎，王小虎，王小虎，王小虎，王小虎，
省份：“上海”，
城市：普陀区，
地址：“上海市普陀区金沙江路1518弄”，
邮编：200333，
显示：真实
}, {
日期：“2016年5月4日”，
姓名：“王小虎”，
省份：“上海”，
城市：普陀区，
地址：“上海市普陀区金沙江路1517弄”，
邮编：200333，
显示：真实
}]
}
}
}
/脚本
另外，注意在data中，按钮的默认值应该放在data下面，如图1所示。
它不能放在表格中，否则按钮将不会显示，并会报告一个错误。图2:属性或方法“BTN状态”没有在实例上定义，但在呈现期间被引用。
出现此错误的原因是模板或方法中使用了“btnStatus ”,但它没有在数据中定义。
关于vue中点击切换按钮的功能这篇文章就到这里了。启用该按钮后，它将被禁用。有关在vue中单击切换按钮的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。