vue 指令学习_vue cancelbuttontext-优快云博客

本文详细介绍了如何使用Vue.js创建一个简易的博客系统，包括文章的添加、展示、删除及修改功能。通过Vue的双向数据绑定特性，实现了动态更新文章列表，并提供了交互式的操作界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

按照blog-demo 进行分析：

显示基本对框框：

绑定事件监听：

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()
}
})
}