zoukankan      html  css  js  c++  java
  • 用Vue实现增删功能

    HTML部分:

    <div class="web" id="vm">
      <h1>网址导航</h1>
    <div class="web-list">

    <table>
      <thead>
        <tr>
          <th width="25%">网站名称</th>
          <th>网址</th>
          <th width="14%">好评度</th>
          <th width="18%">操作</th>
        </tr>
    </thead>

    <tbody id="tbody">
      <tr v-for="(x,index) in http">
        <td>{{ x.webname }}</td>
        <td>{{ x.weburl }}</td>
        <td>{{ x.good }}</td>
        <td>
          <input type="button" value="修改" v-on:click="amend()">
          <input type="button" value="删除" v-on:click="del(index)">
        </td>
      </tr>
    </tbody>
    </table>


    </div>

    <div class="web-form">

    <table>
      <tr>
        <td>网站名称:<input type="text" id="name" v-model="x.webname"></td>
        <td>网址:<input type="text" v-model="x.weburl"></td>
        <td>好评度:

          <select name="" v-model="x.good">
            <option value="">请选择</option>
            <option value="★">★</option>
            <option value="★★">★★</option>
            <option value="★★★">★★★</option>
            <option value="★★★★">★★★★</option>
            <option value="★★★★★">★★★★★</option>
          </select>

        </td>
        <td width="18%"><input type="button" value="新增" v-on:click="addBook()"><input type="button" value="重填" id="reBtn"></td>
      </tr>
    </table>

    </div>


    </div>

    vue.js部分:

    <script>
    var vm = new Vue({
      el:'#vm',
      data:{
        x:{webname:'',weburl:'',good:''},
        http:[
          {webname:'京东',weburl:'http//www.jd.com',good:'★★★★'},
          {webname:'淘宝',weburl:'http//www.taobao.com',good:'★★★★'}
        ],
    },
       methods:{
        // 新增
          addBook: function() {
            this.http.push(this.x);
            this.x = {};
        },
        //刪除
          del: function (index) {
            alert("你确定要删除吗?");
            this.http.splice(index, 1);
          }
      }
    })

    </script>

  • 相关阅读:
    redis 集群目标、集群查看、配置方法及过程、哨兵配置启动
    redis 事务、Jedis事务处理流程
    redis订阅与发布(把redis作为消息中间件)
    redis 管道技术 pipeline 简介
    redis 适用场景、缓存选择、java实现
    redis 数据淘汰策略与配置
    redis 持久化策略、aof配置、测试、手动持久化、aof文件体积优化
    redis 命令行查看修改配置文件项、配置文件说明
    redis HyperLogLog 基数估算
    redis 命令select、dbsize、清空数据库、info、client
  • 原文地址:https://www.cnblogs.com/JKMI/p/7851757.html
Copyright © 2011-2022 走看看