Vue的$set、$delete实现视图层响应

最新推荐文章于 2023-02-07 23:50:38 发布

Start_t

最新推荐文章于 2023-02-07 23:50:38 发布

阅读量175

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/Start_t/article/details/113941647

版权

Vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Vue的$set、$delete实现视图层响应

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div v-for='(item, index) of testArr' :key="index" style="display: flex;">
      <p style="margin-right:50px;">{{item.label}}</p>
      <el-button type="primary" @click='deleteAct(index)'>删除</el-button>
      <el-button type="primary" @click='editAct(item, index)'>修改</el-button>
      <el-button type="primary" @click='lookAct(item)'>查看</el-button>
    </div>
    <el-button type="primary" @click='addAct'>新增</el-button>
    <el-dialog
      title="新增测试数据"
      :visible.sync="dialogVisible"
      width="30%"
      @closed='closed'>
      <el-form ref="form" :model="form" label-width="100px" :rules="rules">
        <el-form-item label="数据：" prop='label'>
          <el-input v-model="form.label"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" v-if='notLook'>
        <el-button @click='dialogVisible = false'>取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  // 对于已经创建的实例，vue不允许动态添加根级别的响应式property，但可以通过$set来实现

  // Vue.set(object, key, value)
  new Vue({
    el: '#app',
    data: function() {
      return {
        testArr: [],
        dialogVisible: false,
        form: {
          label: ''
        },
        rules: {
          label: [{ required: true, message: '请输入'}]
        },
        editIndex: null,
        notLook: true
      }
    },
    methods: {
      // 新增
      addAct() {
        this.dialogVisible = true
      },
      // 对话框消失
      closed() {
        this.$refs.form.resetFields()
        this.editIndex = null
        this.notLook = true
      },
      // 新增-确定
      sure() {
        this.$refs.form.validate(valid => {
          if (valid) {
            if(this.editIndex != null) {
              // 为对象添加属性，更新到视图层
              this.$set(this.testArr, this.editIndex, {label: this.form.label})
            } else {
              this.$set(this.testArr, this.testArr.length, {label: this.form.label})
            }
            this.dialogVisible = false
          } else {
            return false;
          }
        })
      },
      // 删除
      deleteAct(index) {
        this.$delete(this.testArr, index)
      },
      // 修改
      editAct(item, index) {
        this.form.label = item.label
        this.editIndex = index
        this.dialogVisible = true
      },
      // 查看
      lookAct(item) {
        this.form.label = item.label
        this.notLook = false
        this.dialogVisible = true
      }
    }
  })
</script>
</html>

Start_t

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue的$set、$delete实现视图层响应

Vue的$set、$delete实现视图层响应<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://unpkg.com/element-ui/l
复制链接

扫一扫

专栏目录