马老师带你用vue2 实现 table 标签内元素删除动画效果

最新推荐文章于 2022-11-22 15:56:38 发布

蝶舞落红尘

最新推荐文章于 2022-11-22 15:56:38 发布

阅读量563

点赞数

分类专栏：前端小白的探索与实践文章标签： vue html5

本文链接：https://blog.csdn.net/weixin_41415009/article/details/109967681

版权

马老师带你用vue2 实现 table 标签内元素删除动画效果

诶...朋友们好啊，刚才有个年轻人问我发生肾摸事了，我说怎么回事，给我发了几张截图。我一看！嗷！table 标签内元素删除动画效果。年轻人说马老师你能不能加个table标签内元素删除动画的效果，我说可以。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
</head>

<body>
  <div id ="app">
    <div id="wraper">
      <div>
        <h3>添加书籍</h3>
      </div>
      <div>
        <!-- labled的第一种使用方式  for属性和表单元素的id属性绑定到一起 -->
        <label for="bId">ID:</label>
        <input type="text" id="bId" v-model="bId">

        <!-- lable的第二种使用方式 -->
        <label>
          书名: <input type="text" v-model="name">
        </label>
        <input type="button" value="新增" @click="add" >

        <!-- 搜索框 -->
        <label>
          搜索关键字: <input type="text" v-model="keywords" v-focus>
        </label>
      </div>
    </div>

    <!-- 表格标签 -->
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th v-color="'green'">书名</th>
          <th>创建时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in search(keywords)" :key="item.id">
          <td>{
  { item.id }}</td>
          <td v-text="item.name"></td>
          <td v-cloak>{
  { item.createTime | dateFormat("yyyy-mm-dd")}}</td>
          <td>
            <a href="" @click.prevent="del(item.id)">删除</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <script>
    // 定义全局过滤器   表示所有实例都可以使用
    Vue.filter('dateFormat', function(dateStr, pattern) {
      // 根据字符串 找到对应的时间
      var date = new Date(dateStr)

      // 得到年月日
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();

      if (pattern == "yyyy-mm-dd") {
        return year + "-" + month + "-" + day;
      } else {
        // 得到具体时间
        var hour = date.getHours();
        var minute = date.getMin

最低0.47元/天解锁文章

蝶舞落红尘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
马老师带你用vue2 实现 table 标签内元素删除动画效果

马老师带你用vue2 实现 table 标签内元素删除动画效果诶...朋友们好啊，刚才有个年轻人问我发生肾摸事了，我说怎么回事，给我发了几张截图。我一看！嗷！table 标签内元素删除动画效果。年轻人说马老师你能不能加个table标签内元素删除动画的效果，我说可以。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" co
复制链接

扫一扫