Vue基础（二）——Vue基础语法案例

最新推荐文章于 2023-06-14 10:23:40 发布
最新推荐文章于 2023-06-14 10:23:40 发布
阅读量253 收藏
点赞数 1
分类专栏： Vue.js 文章标签： vue.js html5 css3 es6 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27575925/article/details/109816225
版权

案例——图书管理

  • 大致界面如下图所示：

在这里插入图片描述
用户可以在表单输入框中输入编号、图书名称，点击提交后就可以实现图书的添加功能，在图书展示列表中每一行都有修改、删除按钮，点击可以实现相应的修改以及删除功能。

  • 补充知识
    在这里插入图片描述
    在这里插入图片描述

  • 实现步骤：
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .grid {
        /* 水平居中 */
      margin: auto;
      width: 500px;
      text-align: center;
    }
    .grid .aboveTbody {
        width: 100%;
        height: 35px;
        line-height: 35px;
        text-align: center;
        background-color: orange;
        border-bottom: 1px solid greenyellow;
    }
    .grid table {
      width: 100%;
      /* 用于表格属性, 表示表格的两边框合并为一条 */
      border-collapse: collapse;
    }
    .grid th,td {
      padding: 10;
      border: 1px dashed orange;
      height: 35px;
      line-height: 35px;
    }
    .grid th {
      background-color: orange;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="grid">
      <h1>图书管理</h1>
      <div class="aboveTbody">
        <label for="id">编号 :</label>
        <input type="text" id="id" v-model='id' v-bind:disabled="flag">  
        <label for="name">名称 :</label>
        <input type="text" id="name" v-model='name'>  
        <button v-on:click='handle'>提交</button>
      </div>
      <table>
        <thead>
          <tr>
            <th>编号</th>
            <th>名称</th>
            <th>时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr :key='item.id' v-for='item in books'>
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.date}}</td>
            <td>
                <!-- a标签默认有跳转行为，需要阻止 -->
              <a href="" @click.prevent='toEdit(item.id)'>修改</a>
              <span>|</span>
              <a href="" @click.prevent='deleteBook(item.id)'>删除</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      图书管理-图书列表展示功能
      注意事项：<a href="" @click.prevent>修改</a>
      事件绑定时，可以只添加修饰符，而不绑定事件函数
    */
    var vm = new Vue({
      el: '#app',
      data: {
        id: '',
        name: '',
        flag: false,
        books: [{
          id: 1,
          name: '三国演义',
          date: ''
        },{
          id: 2,
          name: '水浒传',
          date: ''
        },{
          id: 3,
          name: '红楼梦',
          date: ''
        },{
          id: 4,
          name: '西游记',
          date: ''
        }]
      },
      methods: {
            handle: function () {
                if (this.flag) {
                    // 编辑操作
                    // 就是根据当前的id去更新数组中对应的数据
                    this.books.some((item) => {
                        // 箭头函数中的this指的是定义这个函数的父级作用域中的 this
                        // 父级作用域其实就是handle的作用域，handle中的this值得就是vue实例本身，所以我们通过vue实例就可以获取到当前的id（也就是表单中的id）
                        if (item.id == this.id) {
                            item.name = this.name;
                            // 完成更新操作之后需要终止循环
                            return true;
                        }
                    });
                    this.flag = false;
                    this.id = '';
                    this.name = '';
                } else {
                    // 添加图书
                    var addBookInfo = {};
                    addBookInfo.id = this.id;
                    addBookInfo.name = this.name;
                    addBookInfo.date = '';
                    this.books.push(addBookInfo);
                    // 提交成功后将input表单清空
                    this.id = '';
                    this.name = '';
                }        
            }, 
            toEdit: function (id) {
              // 禁止修改id
              this.flag = true;
            //   console.log(id);
              // 根据id查询出要编辑的数据
              var book = this.books.filter(function(item){
                  return item.id == id;
              });
              console.log(book);
              // 把获取到的信息填充到表单
              this.id = book[0].id;
              this.name = book[0].name;
            },
            deleteBook: function (id) {
                // 删除图书
                // 根据id从数组中查找元素的索引
                // var index = this.books.findIndex(function(item){
                //     return item.id == id;
                // })
                // 根据索引删除数组元素
                // this.books.splice(index,1);

                //-------------------------------------
                // 第二种方法：(filter属于替换数组)
                this.books = this.books.filter(function(item){
                    return item.id != id;
                });   
            }
          },
              
      });
  </script>
</body>
</html>
  • 添加常用特性：
    在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .grid {
        /* 水平居中 */
      margin: auto;
      width: 500px;
      text-align: center;
    }
    .grid .aboveTbody {
        width: 100%;
        height: 35px;
        line-height: 35px;
        text-align: center;
        background-color: orange;
        border-bottom: 1px solid greenyellow;
    }
    .grid table {
      width: 100%;
      /* 用于表格属性, 表示表格的两边框合并为一条 */
      border-collapse: collapse;
    }
    .grid th,td {
      padding: 10;
      border: 1px dashed orange;
      height: 35px;
      line-height: 35px;
    }
    .grid th {
      background-color: orange;
    }
    .grid .total {
        height: 30px;
        line-height: 30px;
        background-color: orange;
        border-bottom: 1px solid greenyellow;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="grid">
      <h1>图书管理</h1>
      <div class="aboveTbody">
        <label for="id">编号 :</label>
        <input type="text" id="id" v-model='id' v-bind:disabled="flag" v-focus>  
        <label for="name">名称 :</label>
        <input type="text" id="name" v-model='name'>  
        <button v-on:click='handle' v-bind:disabled="submitFlag">提交</button>
      </div>
      <div class="total">
          <span>图书总数 :</span>
          <span>{{ total }}</span>
      </div>
      <table>
        <thead>
          <tr>
            <th>编号</th>
            <th>名称</th>
            <th>时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr :key='item.id' v-for='item in books'>
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.date | format('yyyy-MM-dd hh:mm:ss')}}</td>
            <td>
                <!-- a标签默认有跳转行为，需要阻止 -->
              <a href="" @click.prevent='toEdit(item.id)'>修改</a>
              <span>|</span>
              <a href="" @click.prevent='deleteBook(item.id)'>删除</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      图书管理-图书列表展示功能
      注意事项：<a href="" @click.prevent>修改</a>
      事件绑定时，可以只添加修饰符，而不绑定事件函数
    */

    // 过滤器：实现日期的格式处理
    Vue.filter('format', function(value, arg) {
      function dateFormat(date, format) {
          if (typeof date === "string") {
              var mts = date.match(/(\/Date\((\d+)\)\/)/);
              if (mts && mts.length >= 3) {
                  date = parseInt(mts[2]);
              }
          }
          date = new Date(date);
          if (!date || date.toUTCString() == "Invalid Date") {
              return "";
          }
          var map = {
              "M": date.getMonth() + 1, //月份 
              "d": date.getDate(), //日 
              "h": date.getHours(), //小时 
              "m": date.getMinutes(), //分 
              "s": date.getSeconds(), //秒 
              "q": Math.floor((date.getMonth() + 3) / 3), //季度 
              "S": date.getMilliseconds() //毫秒 
          };

          format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
              var v = map[t];
              if (v !== undefined) {
                  if (all.length > 1) {
                      v = '0' + v;
                      v = v.substr(v.length - 2);
                  }
                  return v;
              } else if (t === 'y') {
                  return (date.getFullYear() + '').substr(4 - all.length);
              }
              return all;
          });
          return format;
      }
      return dateFormat(value, arg);
    });

    // 自定义指令：实现获取表单焦点
    Vue.directive('focus', {
        inserted: function (el) {
            el.focus();
        }
    });

    var vm = new Vue({
      el: '#app',
      data: {
        id: '',
        name: '',
        flag: false,
        submitFlag: false,
        books: []
      },
      methods: {
            handle: function () {
                if (this.flag) {
                    // 编辑操作
                    // 就是根据当前的id去更新数组中对应的数据
                    this.books.some((item) => {
                        // 箭头函数中的this指的是定义这个函数的父级作用域中的 this
                        // 父级作用域其实就是handle的作用域，handle中的this值得就是vue实例本身，所以我们通过vue实例就可以获取到当前的id（也就是表单中的id）
                        if (item.id == this.id) {
                            item.name = this.name;
                            // 完成更新操作之后需要终止循环
                            return true;
                        }
                    });
                    this.flag = false;
                    this.id = '';
                    this.name = '';
                } else {
                    // 添加图书
                    var addBookInfo = {};
                    addBookInfo.id = this.id;
                    addBookInfo.name = this.name;
                    addBookInfo.date = '';
                    this.books.push(addBookInfo);
                    // 提交成功后将input表单清空
                    this.id = '';
                    this.name = '';
                }        
            }, 
            toEdit: function (id) {
              // 禁止修改id
              this.flag = true;
            //   console.log(id);
              // 根据id查询出要编辑的数据
              var book = this.books.filter(function(item){
                  return item.id == id;
              });
              console.log(book);
              // 把获取到的信息填充到表单
              this.id = book[0].id;
              this.name = book[0].name;
            },
            deleteBook: function (id) {
                // 删除图书
                // 根据id从数组中查找元素的索引
                // var index = this.books.findIndex(function(item){
                //     return item.id == id;
                // })
                // 根据索引删除数组元素
                // this.books.splice(index,1);

                //-------------------------------------
                // 第二种方法：(filter属于替换数组)
                this.books = this.books.filter(function(item){
                    return item.id != id;
                });   
            },
          }, 
          // 计算属性：实现统计图书数量
          computed: {
              total: function () {
                  // 计算图书的总数
                  return total = this.books.length;
              }
          },
          // 监听器：监听表单中的name，当输入的图书名称已存在时将提交按钮禁用（disabled）
          // 监听器会一直监听数据的变化，一旦变化就会触发绑定的对应的函数
          watch: {
              name: function (val) {
                  // 验证图书名称是否已经存在
                  var flag = this.books.some(function(item){
                      return item.name == val;
                  });
                  if (flag) {
                      // 图书存在
                      this.submitFlag = true;
                  } else {
                      // 图书名称不存在
                      this.submitFlag = false;
                  }
              }
          },
          // 生命周期: 图书数据处理
          mounted: function () {
              // 该生命周期钩子函数被触发时，模板已经可以使用了（可以把数据放进去了，因此我们可以从后台获取数据，把数据填充到模板中）
              // 一般此时用于获取后台数据，然后把数据填充到模板
              var data = [{
                    id: 1,
                    name: '三国演义',
                    date: 2525609999999
                    },{
                    id: 2,
                    name: '水浒传',
                    date: 2525609999999
                    },{
                    id: 3,
                    name: '红楼梦',
                    date: 2525609999999
                    },{
                    id: 4,
                    name: '西游记',
                    date: 2525609999999
                    }];
                    this.books = data;

          }
           
      });
  </script>
</body>
</html>

点击修改时：
在这里插入图片描述
编号对应的input表单不能编辑，因为设置了 disabled属性的值为true，因此可以防止编号改变。修改完成后，重新渲染列表页，同时将编号input表单的disabled属性值修改为false，且清空表单里面的内容。

输入的图书的名称已存在时，将提交表单禁用：
在这里插入图片描述

1oneLee
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue基础语法——表单绑定语法、计算属性、侦听器、过滤器、vue生命周期
12-09
对vue基础语法一些简单的总结和案例，适合新手小白哦~
Vue2知识
qq_43671085的博客
06-08 119
vue2
(vue)表格中的选择框自动返显
nyf_unknow的博客
05-08 515
【代码】(vue)表格中的选择框自动返显。
vue 下拉搜索选中仓库自动带出地址
jasmine0178的博客
11-29 312
效果 element搜索插件 async Search(queryString, cb) { let params = { inside: 0, code: queryString, currentPage: 1, pageSize: 20 }; let res = await getB...
vue element-ui级联选择器选中后下拉框自动收起
qq_43248623的博客
06-16 2790
Cascader 级联选择器 数据渲染 通过 :options=“options” 映射,让每一级都可以选择(选项前会有圆圈可勾选)设置属性 :props="{ checkStrictly: true }" 1、点击后下拉框自动收起实现 设置每次监听值变化的时候，把 dropDownVisible 属性设置为 false 即可。（这个属性，官网根本没有说… ） html部分: <el-form-item label="菜单"> <el-cascader ref="cascad
vue基础代码演示——temp.json
03-21
如果觉得百度云下载速度慢可以在此处下载，如果没有积分也可以直接私信博主直接给文件，所需积分只是给个鼓励，谢谢支持！！！
一、vue基础语法（轻松入门vue）
01-08
Vue基础语法一、HelloWord二、MVVM设计思想三、指令1. v-cloak2. v-text3. v-html4. v-show4. v-pre5. v-once6. v-model7. v-on事件修饰符按键修饰符自定义按键修饰符8. v-bindclass样式绑定style样式绑定9. v-if、v...
Vue 基础TODO案例分析.md
05-23
TODO案例分析.md
vue基础语法练习源码
12-09
本套资源，是在html文件中测试的一些vue基础语法，包括过滤器、定义插件、列表渲染等语法。此资源适用于初学vue的小伙伴，用于加深对vue语法的熟悉。
vue+element的表格中添加加减按钮的问题
09-05
这个是一个table框加减按钮的一个功能模块，这个是在其他的地方没有的，表格加载加减按钮点击时互不影响的一种方法。
记录：vue 让element-ui级联选择器选中后下拉框自动收起/解决懒加载后选择任意一级出现暂无数据
iseyre的博客
02-15 1209
【代码】记录：vue element-ui级联选择器选中后下拉框自动收起。
Vue中如何进行表单自动完成与下拉选择器
最新发布
程序员徐师兄的博客
06-14 1212
如果默认的Vue-Autocomplete样式不能满足你的需求，你可以自定义样式。这里我们引入了Vue-Autocomplete的默认样式和自定义样式文件，你可以根据自己的需求来修改样式文件名和文件路径。在这个例子中，我们使用了CSS选择器来定制样式，以实现自定义风格。如果默认的Vue-Select样式不能满足你的需求，你可以自定义样式。这里我们引入了Vue-Select的默认样式和自定义样式文件，你可以根据自己的需求来修改样式文件名和文件路径。
Vue中的表单操作及注意事项
m0_67198021的博客
11-28 276
Vue中的表单操作以及需要避坑的细节
VUE-09 增加数据的功能（增加一个新的商品信息）
m0_59214979的博客
09-19 463
本节目的：在页面上可以看到，增加信息，比如：添加一个新的品牌， 新的用户信息，新的商品信息。 1.html,在输入框，进行数据的绑定，接收内容，点击上传 2.script：方法功能，使用aixos接口的调用 3.路由的配置 importaddfrom"../pages/admin/goods_add" //第一个add是指针，要和compoent的一致，第二个add是.vue文件的名字 constroutes=[{ path:"/main...
vue监听表单项填写完整
weixin_42375707的博客
08-20 1710
vue监听表单项填写完整
vue+element实现表格全选所有
qq_42661587的博客
09-30 2095
<el-table :data="userList" highlight-current-row :header-cell-style="{ background: '#F9F9FB', color: '#555' }" style="width: 100%; border: solid 1px #f2f6fc" ref="mListTable" :row-key="r...
Vue使用Element的表单Form必填项太多，导致代码冗余
小钻风的博客
03-11 2051
Vue项目使用Element表单时，常会遇到表单很长，字段很多，必填项也多，曾经遇到过一张表单50多个字段，几乎全是必填项，本身ruleForm去定义就很长，再加上必填项rules的定义，光表单这点东西就100多行定义了，更别说页面中还有别的代码，整个页面看起来很不美观，也很冗余。 下面介绍一种方法，可以减少rules的长度，主要针对： 1、字段多表单长；2、只做必填项校验；3、几乎全是必填项 原理就是：利用for循环来循环定义的表单ruleForm 话不多说，直接上代码 created() {
Vue 从字符串中提取某一字段
热门推荐
m0_37683876的博客
08-09 1万+
  首先要明确在vue中这样做是可行的。。。   1.需要在编辑页面有这个的字符串传递过来   2.在watch中写一个for循环   3.在create里写一个一样的（还不清楚为什么。。）   注意：“！”和“=”之间不能有空格；   4.HTML里写一个v-for...
vue3基础语法小案例
04-03
以下是一个简单的Vue3基础语法小案例： HTML代码： ``` <h1>{{ message }} <button v-on:click="changeMessage">Change Message ``` Vue实例代码： ``` const app = Vue.createApp({ data() { return { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值