<!DOCTYPE html>
<html lang=\"en\">

<head>
  < ></ >
  <  charset=\"UTF-8\">
  <  name=\"viewport\" content=\"width=device-width, initial-scale=1\">
  <  src=\"./vue.js\"></ >
  <!-- 1. 引入axios文件 -->
  <  src=\"./axios.js\"></ >
  <style>

    #app{
            width:600px;
                margin:10px auto;
        }
          .tb{
              border-collapse:collapse;
              width: 100%;
          }
          .tb th{
              background-color: #0094ff;
              color:white;
          }
  
          .tb td,.tb th{
              padding:5px;
              border:1px solid black;
              text-align: center;
          }
  
          .add{
              padding: 5px;
              border:1px solid black;
              margin-bottom: 10px;
          }
      </style>
</head>

<body>
  <div id=\"app\">
    <div class=\"add\">
      编号:<input type=\"text\" v-model=\"newId\" id=\"myIdInput\" ref=\"idRef\">
      品牌名称:<input type=\"text\" v-model=\"newName\" ref=\"nameRef\">
      <input type=\"button\" value=\"添加\" @click=\"addData\">
    </div>

    <div class=\"add\">
      品牌名称:<input type=\"text\" placeholder=\"请输入搜索条件\" v-model=\"searchName\" @keydown.enter=\"search\">
    </div>

    <div>
      <table class=\"tb\">
        <tr>
          <th>编号</th>
          <th>品牌名称</th>
          <th>创立时间</th>
          <th>操作</th>
        </tr>
        <tr v-for=\"(item, index) in list\" :key=\"index\">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.ctime}}</td>
          <td>
            <button @click=\"deleteData(item.id)\">删除</button>
          </td>
        </tr>
        <tr v-if=\"list.length === 0\">
          <td colspan=\"4\">没有品牌数据</td>
        </tr>
      </table>
    </div>
  </div>
</body>
< >
  let vm = new Vue({
    el: \'#app\',
    data: {
      newId: \'\',
      newName: \'\',
      list: [],
      searchName: \'\' //获取搜索的名字
    },
    methods: {
      // 添加数据
      addData() {
       let url = \'http://list\'
       axios.post(url, {id: this.newId, name: this.newName, ctime: new Date()})
        .then(res => {
          // console.log(res);
          if(res.status === 201) {
            // 重新刷新一下列表数据
            this.getList()
          }
        })
      },
      // 获取列表数据方法
      getList() {
        let url = \'http://19st\'
        // 调用axios的get方法，获取数据
        axios.get(url)
          .then(res => {
            console.log(res);
            // 将获取回来的数据赋值给list
            this.list = res.data
          })
          .catch(err => {
            console.log(err);
          })
      },
      // 搜索方法
      search() {
        let url = \'http://1list\'
        axios.get(url,{params: {name: this.searchName}})
          .then(res => {
            if (res.status === 200) {
              this.list = res.data
              this.searchName = \'\'
            }
          })
      },
      // 删除方法
      deleteData(id) {
        let url = `http://19list/${id}`
        axios.delete(url)
          .then(res => {
            this.getList()
          })
      }
    },
    mounted () {
      this.getList()
    }
  })
</ >

</html>

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月18日 星期一

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章