vue操作数据

学习vue有一段时间了，在vue中操作数据感觉是很爽的，以前使用jquery的时候在动态改变一些属性的时候总是在不同的获取dom，操作dom，但是vue上却只需要操作数据就行了。
例如在控制按钮的功能汉字，例如“更新”，“添加”只需要定义一个数据或者对象，初始化数据或对象，然后使用插值表达式{{}}就可以想怎么变就怎么变。
在很多时候，我们的新增，编辑，查看表单使用的是一个表单，只是在打开新增的时候我们获取的是一个空表单,在查看的时候我们希望看到是一个没法编辑的表单，在编辑的时候我们希望是一个有原始数据，并且select等都已经绑定的表单.....，并且这些表单的头部根据业务不同需要动态改变......
要实现这些操作，我们只需要将这些属性数据绑定成一个对象就行

dialog: {
        title: '增加',
        disabled: false,
        isshow: true,
        operatetype: '添加'
      },

其中 title 代表的是表单的title

image.png

diaabled:代表表单的可编辑状态

image.png
isshow：代表按钮的显示状态
operatetype：代表操作按钮的名字
image.png

在后续的过程中我们只需要操作数据对象以及这个属性对象来控制各部分数据即可
注意，此处使用的是vue+element
部分代码

    showTemplate(row) {
      this.dialog.title = '查看模板'
      this.dialog.disabled = true
      this.dialog.isshow = false
      Axios.get('http://localhost:60000/noticetemplate/queryById/' + row.templateId).then(res => {
        this.noticeTemplate = res.data.data
        this.dialogFormVisible = true
      })
    },
    deleteTemplate(row) {
      Axios.delete('http://localhost:60000/noticetemplate/delete/' + row.templateId).then(res => {
        this.queryList()
      })
    },
    updateTemplate(row) {
      this.dialog.title = '编辑模板'
      this.dialog.disabled = false
      this.dialog.isshow = true
      this.dialog.operatetype = '更 新'

      Axios.get('http://localhost:60000/noticetemplate/queryById/' + row.templateId).then(res => {
        this.noticeTemplate = res.data.data
        this.dialogFormVisible = true
        this.queryList()
      })
    },

效果图

image.png
image.png
image.png