IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> Vue基础超详细 -> 正文阅读

[JavaScript知识库]Vue基础超详细

目录

一、Vue的简介

1、什么是vue

?2、vue 的特性(数据驱动视图、双向数据绑定)

?3、MVVM及其工作原理

?二、Vue的基本实用

1、基本使用步骤

?2、配置Vue的调试工具

3、指令与过滤器

3.1内容渲染指令

?4、属性绑定指令

?5、使用Javascript表达式

?6、事件绑定指令

详细用法可以搜索:click、input、keyip的区别

7、事件对象

?8、事件修饰符

?9、按键修饰符

10、双向数据绑定指令

11、v-model的修饰符

12、条件渲染指令

?12.1 v-if配套指令

?编辑

?13、列表渲染指令 v-for

三、插件下载样式提示:

?编辑

四、案例演示

品牌列表案例1.0(不含过滤器)

注:过滤器在Vue3.0中没有了

查看一些label的for属性

品牌列表案例2.0(含过滤器)


一、Vue的简介

1、什么是vue

?2、vue 的特性(数据驱动视图、双向数据绑定)

?

?

?3、MVVM及其工作原理

?

?

?

?二、Vue的基本实用

1、基本使用步骤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <!-- 希望Vue能够控制下面这个div,帮我们在把数据填充到div内部 -->
    <div id="app">{{username}}</div>

    <!-- 导入Vue的库文件 ,在window全局就有了Vue这个构造函数-->
    <script src="./lib/vue-2.6.12.js"></script>

    <!-- 创建Vue的实例对象 -->
    <script>
        // 创建Vue的实例对象
        const vm = new Vue({
            // el(element)属性是固定的写法,表示当前vm实例要控制界面上的哪个区域,接收的值是一个选择器
            el:'#app',
            // data对象就是要渲染到页面上的数据
            data:{
                username: 'lisi'
            }
        })
    </script>
</body>
</html>

?2、配置Vue的调试工具

详细安装看另外文档(Edge版本)

3、指令与过滤器

3.1内容渲染指令

?

?

?

?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <!-- 希望Vue能够控制下面这个div,帮我们在把数据填充到div内部 -->
    <div id="app">
        <p v-text="username"></p>
        <!-- 缺点v-text标签会覆盖元素内部原有的内容 -->
        <p v-text="gender">性别:</p>
        <!-- 分割线 -->
        <hr>
        <p>姓名: {{username}}</p>
        <p>性别: {{gender}}</p>
        <!-- 分割线 -->
        <hr>
        <div v-text="info"></div>
        <div>{{info}}</div>
        <!-- v-html可以把带有标签的字符串渲染成真正的字符串 -->
        <div v-html="info"></div>
        
    </div>

    <!-- 导入Vue的库文件 ,在window全局就有了Vue这个构造函数-->
    <script src="./lib/vue-2.6.12.js"></script>

    <!-- 创建Vue的实例对象 -->
    <script>
        // 创建Vue的实例对象
        const vm = new Vue({
            // el(element)属性是固定的写法,表示当前vm实例要控制界面上的哪个区域,接收的值是一个选择器
            el:'#app',
            // data对象就是要渲染到页面上的数据
            data:{
                username: 'zhangsan',
                gender:'女',
                info: '<h4 style="color:red;font-weight:bold;">欢迎大家来学习Vue.js</h4>'
            }
        })
    </script>
</body>
</html>

?4、属性绑定指令

如果需要为元素的属性动态绑定属性值,则需要用到v-bind属性绑定指令(简写形式的是直接打冒号:)

?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <!-- 希望Vue能够控制下面这个div,帮我们在把数据填充到div内部 -->
    <div id="app">
        <!--  v-bind:placeholder或者 :placeholder -->
        <!-- 使用v-bind指令,为input的placeholder动态绑定属性值 -->
        <input type="text" v-bind:placeholder="tips">
        <!-- 简写形式 -->
        <input type="text" :placeholder="tips">
        <hr>
        <!-- 使用v-bind指令,为img的src动态绑定属性值 -->
        <img v-bind:src="photo" alt="" style="width:150px">
        <!-- 简写形式 -->
        <img :src="photo" alt="" style="width:150px">
    </div>

    <!-- 导入Vue的库文件 ,在window全局就有了Vue这个构造函数-->
    <script src="./lib/vue-2.6.12.js"></script>

    <!-- 创建Vue的实例对象 -->
    <script>
        // 创建Vue的实例对象
        const vm = new Vue({
            // el(element)属性是固定的写法,表示当前vm实例要控制界面上的哪个区域,接收的值是一个选择器
            el:'#app',
            // data对象就是要渲染到页面上的数据
            data:{
                tips:'请输入用户名',
                photo:'https://v2.cn.vuejs.org/images/logo.svg'
            }
        })
    </script>
</body>
</html>

?

?5、使用Javascript表达式

<div>1 + 2 的结果是:{{1+2}}</div>
<div>{{tips}}反转的结果是:{{tips.split('').reverse().join('')}}</div>
<div v-bind:title="'box'+index">这是一个div</div>

?6、事件绑定指令

? <!-- 在绑定事件处理函数的时候,可以使用()传递参数 -->

? ? ? ? <!-- v-on:的指令可以被简写为@ -->

? ? ? ? <!-- 简写形式把v-on:简写为@符号 -->

详细用法可以搜索:click、input、keyip的区别

v-on:click

v-on:input

v-on:keyup:@keyup是一些按键松开的操作,比如
@keyup.enter表示按下回车键松开后触发
@keyup.left表示鼠标左键按下松开后触发
@keyup.right表示鼠标按下右键松开后触发
@keyup.delete表示按下删除键松开后触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <!-- 希望Vue能够控制下面这个div,帮我们在把数据填充到div内部 -->
    <div id="app">
        <p>count的值是{{count}}</p>
        <!-- 在绑定事件处理函数的时候,可以使用()传递参数 -->
        <!-- v-on:的指令可以被简写为@ -->
        <!-- 简写形式把v-on:简写为@符号 -->
        <button v-on:click="add(2)">+1</button>
        <button @click="add(2)">+1</button>
        <!-- 如果事件处理函数中的代码足够简单,只有一行代码,则可以简写到行内 -->
        <button @click="count += 1">+1</button>

        <button v-on:click="sub">-1</button>
        <button @click="sub">-1</button>


    </div>

    <!-- 导入Vue的库文件 ,在window全局就有了Vue这个构造函数-->
    <script src="./lib/vue-2.6.12.js"></script>

    <!-- 创建Vue的实例对象 -->
    <script>
        // 创建Vue的实例对象
        const vm = new Vue({
            // el(element)属性是固定的写法,表示当前vm实例要控制界面上的哪个区域,接收的值是一个选择器
            el:'#app',
            // data对象就是要渲染到页面上的数据
            data:{
                count:0
            },
            // methods的作用,就是定义事件的处理函数
            methods:{
                add:function(n){
                    console.log("ok")
                    // 打印的话可以看到count字段
                    console.log(vm)
                    console.log(this)
                    // true
                    console.log(vm==this)
                    // vm.count++
                    // this.count++
                    this.count+=n
                },
                // 简写
                sub(){
                    console.log("delete")
                    this.count--
                }
                
            }
        })
    </script>
</body>
</html>

7、事件对象

$event的应用场景:如果默认的事件对象e被覆盖了,则可以手动传递一个$event

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <!-- 希望Vue能够控制下面这个div,帮我们在把数据填充到div内部 -->
    <div id="app">
        <p>count 的值是:{{count}}</p>
        <!-- 如果count是偶数,则按钮背景变成红色,否则,取消背景颜色 -->
        <!-- vue提供了内置变量,名字叫做$event,它就是原生DOM的事件对象e -->
        <!-- 不传参数默认e -->
        <!-- <button @click="add">+N</button> -->
        <button @click="add(1,$event)">+N</button>
    </div>

    <!-- 导入Vue的库文件 ,在window全局就有了Vue这个构造函数-->
    <script src="./lib/vue-2.6.12.js"></script>

    <!-- 创建Vue的实例对象 -->
    <script>
        // 创建Vue的实例对象
        const vm = new Vue({
            // el(element)属性是固定的写法,表示当前vm实例要控制界面上的哪个区域,接收的值是一个选择器
            el:'#app',
            // data对象就是要渲染到页面上的数据
            data:{
                count:0
            },
            methods:{
                // 没有传参打e默认传整个事件
                add(n,e){
                    this.count+=n
                    console.log(e)

                    // 判断this.count的值是否为偶数
                    if(this.count%2===0){
                        // 偶数
                        e.target.style.backgroundColor = 'red'
                    }else{
                        e.target.style.backgroundColor = ''

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

?8、事件修饰符

?9、按键修饰符

?清空

 clearInput(e){
     e.target.value=''
     console.log("触发了clearInput方法")
  }

10、双向数据绑定指令

v-bind是属于单向绑定

v-model属于双向绑定

看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <!-- 希望Vue能够控制下面这个div,帮我们在把数据填充到div内部 -->
    <div id="app">
        <p>用户的名字是:{{username}}</p>
        <input type="text" v-model="username">
        <hr>
        <!--这个不能实时更新 属于单项绑定 -->
        <input type="text" :value="username">
        <hr>
        <!-- v-model只能和表单属性使用 比如:input输入框 、textarea文字框、select -->
        <!-- <div v-model="username"></div> -->
        <p>{{city}}</p>
        <select v-model="city">
            <option value="请选择城市">请选择城市</option>
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="广州">广州</option>

        </select>
    </div>

    <!-- 导入Vue的库文件 ,在window全局就有了Vue这个构造函数-->
    <script src="./lib/vue-2.6.12.js"></script>

    <!-- 创建Vue的实例对象 -->
    <script>
        // 创建Vue的实例对象
        const vm = new Vue({
            // el(element)属性是固定的写法,表示当前vm实例要控制界面上的哪个区域,接收的值是一个选择器
            el:'#app',
            // data对象就是要渲染到页面上的数据
            data:{
                username: 'lisi',
                city:'请选择城市'
            }
        })
    </script>
</body>
</html>

11、v-model的修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <!-- 希望Vue能够控制下面这个div,帮我们在把数据填充到div内部 -->
    <div id="app">
        <!-- input输入的字符串 -->
        <input type="text" v-model="n1"> + <input type="text" v-model="n2"> = <span>{{n1 + n2}}</span>
        <!-- 正确写法 -->
        <input type="text" v-model.number="n1"> + <input type="text" v-model.number="n2"> = <span>{{n1 + n2}}</span>
        <hr>
                <!-- 去除前后的空格 -->
        <input type="text" v-model.trim="username">
        <button @click="showName">获取用户名</button>
        <hr>
        <input type="text" v-model="username">
    </div>

    <!-- 导入Vue的库文件 ,在window全局就有了Vue这个构造函数-->
    <script src="./lib/vue-2.6.12.js"></script>

    <!-- 创建Vue的实例对象 -->
    <script>
        // 创建Vue的实例对象
        const vm = new Vue({
            // el(element)属性是固定的写法,表示当前vm实例要控制界面上的哪个区域,接收的值是一个选择器
            el:'#app',
            // data对象就是要渲染到页面上的数据
            data:{
                username: 'lisi',
                n1: 1,
                n2: 2
            },
            methods: {
                showName(){
                    // console.log('用户名是:"${this.username}"')
                    // 这里是反引号在数字1旁边
                    console.log(`用户名是:"${this.username}"`)

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

12、条件渲染指令

?

?

?12.1 v-if配套指令

?13、列表渲染指令 v-for

?

?unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。

?将新项添加到数组末尾,请使用 push() 方法。

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 在页面中声明一个将要被 vue 所控制的 DOM 区域 -->
  <div id="app">

    <!-- 添加用户的区域 -->
    <div>
      <input type="text" v-model="name">
      <button @click="addNewUser">添加</button>
    </div>

    <!-- 用户列表区域 -->
    <ul>
      <li v-for="(user, index) in userlist" :key="user.id">
        <input type="checkbox" />
        姓名:{{user.name}}
      </li>
    </ul>
  </div>

  <script src="./lib/vue-2.6.12.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        // 用户列表
        userlist: [
          { id: 1, name: 'zs' },
          { id: 2, name: 'ls' }
        ],
        // 输入的用户名
        name: '',
        // 下一个可用的 id 值
        nextId: 3
      },
      methods: {
        // 点击了添加按钮
        addNewUser() {
          // unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。
          // 将新项添加到数组末尾,请使用 push() 方法。
          this.userlist.push({ id: this.nextId, name: this.name })
          this.name = ''
          this.nextId++
        }
      },
    })
  </script>
</body>

</html>

三、插件下载样式提示:

?vue提示

四、案例演示

品牌列表案例1.0(不含过滤器)

注:过滤器在Vue3.0中没有了

查看一些label的for属性

     <!-- label根据id,所以id要不一样 -->
     <!-- 使用v-if结合 v-else实现按需渲染 -->
 <label class="custom-control-label" :for="'cb'+item.id" v-if="item.status">已启用</label>
  <label class="custom-control-label" :for="'cb'+item.id" v-else>已禁用</label>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 导入 bootstrap 的样式表 -->
    <!-- https://v4.bootcss.com/docs/components/forms/#switches -->
    <link rel="stylesheet" href="./lib/bootstrap.css" />
    
    <style>
      :root {
        font-size: 13px;
      }

      body {
        padding: 8px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 卡片区域 -->
      <div class="card">
        <h5 class="card-header">添加品牌</h5>
        <div class="card-body">
          <!-- 添加品牌的表单 -->
          <!-- from表单元素有submit事件 得阻止表单的提交行为 不然点击button就会刷新网页 -->
          <form class="form-inline" @submit.prevent="add">
            <div class="input-group mb-2 mr-sm-2">
              <div class="input-group-prepend">
                <div class="input-group-text">品牌名称</div>
              </div>
              <!-- 文本输入框 -->
              <input type="text" class="form-control" placeholder="请输入品牌名称"
              v-model.trim="brand" />
            </div>

            <!-- 提交表单的按钮 -->
            <button type="submit" class="btn btn-primary mb-2" >添加品牌</button>
          </form>
        </div>
      </div>

      <!-- 品牌列表 -->
      <table class="table table-bordered table-striped mt-2">
        <thead>
          <tr>
            <th>#</th>
            <th>品牌名称</th>
            <th>状态</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <!-- 表格的主体区域 -->
        <tbody>
          <!-- TODO:循环渲染表格的每一行数据 -->
          <tr v-for="item in list" :key="item.id">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>
              <div class="custom-control custom-switch">
                <!-- 使用v-model 可以实现双向绑定-->
                <input type="checkbox" class="custom-control-input" :id="'cb'+item.id" 
                v-model="item.status">
                <!-- label根据id,所以id要不一样 -->
                <!-- 使用v-if结合 v-else实现按需渲染 -->
                <label class="custom-control-label" :for="'cb'+item.id" v-if="item.status">已启用</label>
                <label class="custom-control-label" :for="'cb'+item.id" v-else>已禁用</label>


              </div>
            </td>
            <td>{{item.time}}</td>
            <td>
              <a href="javascript:;" @click="remove(item.id)">删除</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <script src="./lib/vue-2.6.12.js"></script>
    <script>
      const vm = new Vue({
        el:'#app',
        data:{
          // 用户输入的品牌的名称
          brand:'',
          // nextId 是下一个,可用的id
          nextId: 4,
          // 品牌列表的数据
          list:[
            {id:1,name:'宝马',status:true,time:new Date()},
            {id:2,name:'奔驰',status:false,time:new Date()},
            {id:3,name:'奥迪',status:true,time:new Date()},

          ]
        },
        methods: {
          remove(id){
            console.log(id)
             this.list= this.list.filter(item=>item.id !==id)
            
          },
        //   组织表单的默认提交行为后,触发add方法
          add(){
            // 如果判断到brand的值为空字符串,则return出去
            if(this.brand==='') return alert("必须填写品牌名称")

            // 如果没有被return出去,应该执行添加的逻辑
            // 1.先把要添加的品牌对象,整理出来
            // 2.往this.list数组中push步骤1中得到的对象
            // 3.清空this.brand;让nextId 自增+1
          const obj={
            id:this.nextId,
            name:this.brand,
            status:true,
            time:new Date()
          }
          // unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。
          // 将新项添加到数组末尾,请使用 push() 方法。
          this.list.push(obj)
          this.brand=''
          this.nextId++
          
          console.log(this.brand)
          }
        },
      })
    </script>
  </body>
</html>

品牌列表案例2.0(含过滤器)

过滤器

?

?

?私有过滤器何全局过滤器

?

?

?

?

?

?

?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 导入 bootstrap 的样式表 -->
    <!-- https://v4.bootcss.com/docs/components/forms/#switches -->
    <link rel="stylesheet" href="./lib/bootstrap.css" />
    
    <style>
      :root {
        font-size: 13px;
      }

      body {
        padding: 8px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 卡片区域 -->
      <div class="card">
        <h5 class="card-header">添加品牌</h5>
        <div class="card-body">
          <!-- 添加品牌的表单 -->
          <!-- from表单元素有submit事件 得阻止表单的提交行为 不然点击button就会刷新网页 -->
          <form class="form-inline" @submit.prevent="add">
            <div class="input-group mb-2 mr-sm-2">
              <div class="input-group-prepend">
                <div class="input-group-text">品牌名称</div>
              </div>
              <!-- 文本输入框 -->
              <input type="text" class="form-control" placeholder="请输入品牌名称"
              v-model.trim="brand" />
            </div>

            <!-- 提交表单的按钮 -->
            <button type="submit" class="btn btn-primary mb-2" >添加品牌</button>
          </form>
        </div>
      </div>

      <!-- 品牌列表 -->
      <table class="table table-bordered table-striped mt-2">
        <thead>
          <tr>
            <th>#</th>
            <th>品牌名称</th>
            <th>状态</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <!-- 表格的主体区域 -->
        <tbody>
          <!-- TODO:循环渲染表格的每一行数据 -->
          <tr v-for="item in list" :key="item.id">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>
              <div class="custom-control custom-switch">
                <!-- 使用v-model 可以实现双向绑定-->
                <input type="checkbox" class="custom-control-input" :id="'cb'+item.id" 
                v-model="item.status">
                <!-- label根据id,所以id要不一样 -->
                <!-- 使用v-if结合 v-else实现按需渲染 -->
                <label class="custom-control-label" :for="'cb'+item.id" v-if="item.status">已启用</label>
                <label class="custom-control-label" :for="'cb'+item.id" v-else>已禁用</label>


              </div>
            </td>
            <td>{{item.time | dateFormat}}</td>
            <td>
              <a href="javascript:;" @click="remove(item.id)">删除</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <script src="./lib/vue-2.6.12.js"></script>
    <!-- 只要导入dayjs的库文件,在window全局,就可以使用dayjs()方法 -->
    <script src="./lib/dayjs.min.js"></script>
    <script>
        // 声明格式化事件的全局过滤器
        Vue.filter('dateFormat',function(time){
            // 1.对time进行格式化处理,得到YYYY-MM-DD HH:mm:ss
            // 2.把格式化的结果,return出去

            // 直接调用dayjs()得到的是当前时间
            // dayjs(给定的日期时间)得到指定的日期
            const dtStr =  dayjs(time).format('YYYY-MM-DD HH:mm:ss A')
            return dtStr
        })
      const vm = new Vue({
        el:'#app',
        data:{
          // 用户输入的品牌的名称
          brand:'',
          // nextId 是下一个,可用的id
          nextId: 4,
          // 品牌列表的数据
          list:[
            {id:1,name:'宝马',status:true,time:new Date()},
            {id:2,name:'奔驰',status:false,time:new Date()},
            {id:3,name:'奥迪',status:true,time:new Date()},

          ]
        },
        methods: {
          remove(id){
            console.log(id)
             this.list= this.list.filter(item=>item.id !==id)
            
          },
        //   组织表单的默认提交行为后,触发add方法
          add(){
            // 如果判断到brand的值为空字符串,则return出去
            if(this.brand==='') return alert("必须填写品牌名称")

            // 如果没有被return出去,应该执行添加的逻辑
            // 1.先把要添加的品牌对象,整理出来
            // 2.往this.list数组中push步骤1中得到的对象
            // 3.清空this.brand;让nextId 自增+1
          const obj={
            id:this.nextId,
            name:this.brand,
            status:true,
            time:new Date()
          }
          // unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。
          // 将新项添加到数组末尾,请使用 push() 方法。
          this.list.push(obj)
          this.brand=''
          this.nextId++
          
          console.log(this.brand)
          }
        },
      })
    </script>
  </body>
</html>

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-12-25 10:59:18  更:2022-12-25 11:04:39 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/25 12:17:41-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码