vue 指令学习

按照blog-demo 进行分析：

  <p>标题：<input type="text" v-model="title" placeholder="标题" ></p>
    <p>内容：<textarea name="content" id="" cols="30" rows="10" v-model="content"></textarea></p>
    <p><input type="submit" value="添加" v-on:click="add" ></p>

显示基本对框框：

绑定事件监听：         

 data:{
        // 标题
        title:'',
        // 内容
        content:'',
        // 所有的内容
        datas:[]
      },

 if(this.title =="" || this.content==""){
            alert("标题或内容不能为空")
            return
          }
          // 把标题和内容添加到数组中
          this.datas.push({"title":this.title,"content":this.content})
          // 添加完数据以后把标题和内容置空
          this.title=""
          this.content=""

二。有无表格的数据显示：

依次遍历的表格数据并显示出来

<table border="1">
      <tr>
        <th>序号</th>
        <th>标题</th>
        <th>内容</th>
        <th>操作</th>
      </tr>
      <!-- 遍历把内容显示出来 -->
      <tr v-for="(data,index) in datas">
        <td>{{index+1}}</td>
        <td>{{data.title}}</td>
        <td>{{data.content}}</td>
        <td>
          <a href="#" v-on:click="deleteRow(index)">删除</a>
          <a href="#" v-on:click="modifyData(index)">修改</a>
        </td>
      </tr>
    </table>
    <span v-show="datas.length!=0" ><a href="#" v-on:click="deleteAllData()">全部删除</a></span>
    <!-- 没有数据的显示这个标签 -->
    <span v-show="datas.length==0">没有数据</span>

删除 和修改操作：

  deleteRow(index){
          //在一个方法中调用
          let that = this // 由于是在方法的方法内部，this 就指的是当前方法了， 所以要使用 var that = this 来声明一下
         //在一个方法中调用 另一个方法
         this.$options.methods.deleteMethod(function callback(){
             that.datas.splice(index,1)
         })
        },

修改数据拼了一个dialog,调用splice 函数处理。

  // 取得原来的数据
          let data = this.datas[index]

          swal({
            title: '修改',
            // type: 'info',
            html:
              "<div><p>标题:<input id=\"title\" value="+data.title+" ></input></p>"+
              " <p>内容:<input  id=\"content\" value="+data.content+"></input></p></div>" ,

            showCancelButton: true,
            focusConfirm: false,
            confirmButtonText:'确定',
            cancelButtonText:'取消'
          }).then((result)=>{
            if(result.value){
              let title = document.getElementById('title').value
              let content = document.getElementById('content').value
              // 修改数据
              this.datas.splice(index,1,{"title":title,"content":content})
            }
          })

全部删除:增加一个dialog 回调：

  //这里使用箭头函数就不用再使用 let that = this 来转化了,可以上面的比较一下，两种方式
         this.$options.methods.deleteMethod(()=>{
           this.datas = []
         })

 deleteMethod(callback){
          swal({
            title: '确定删除吗?',
            text: "全部删除了以后就不恢复不了哦！",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            cancelButtonText:'取消',
            confirmButtonText: '确定删除!'
          }).then((result) => {
            if (result.value) {
               callback()
            }
          })
        }

效果图：

参见github:

参考博文：

   https://blog.csdn.net/g0415shenw/article/details/99639519