Vue切换“编辑”和“完成”状态

11.jpg

如图所示：点击“编辑”时，可以对页面进行操作，这时”编辑“变成”成功“。当点击”完成“时，再变为”编辑“。
有两种方法：
1、用双向数据绑定，写一个点击事件，对绑定的变量进行判断。
2、两个点击事件用if做判断，当状态值为1时，显示编辑，为2时显示完成。
图1

d0d4249c7f79007c1a938731628b5db.png

图2

90c78d8f6c54ce6418ac1715edeae21.png