Vue: ----- 记事本案例

开发环境参考本人vue博客

记事本综合案例步骤
  1. 完成记事本的查询所有功能:(1)将所有数据绑定给vue实例(2)遍历vue实例中数据到页面
  2. 添加 :添加按钮绑定事件、在事件中获取输入框的数据、将数据放入list中
  3. 删除: 在删除按钮处获取下标index 定义点击事件方法 在方法中将list的下标删除
  4. 删除所有:将list定义为[],并且list.length长度不是0才展示删除所有按钮
  5. 总数量:就是list.length的长度

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>记事本综合案例title>
head>
<body>
<div id="app">
    <input type="text" v-model="mes">
    <button @click="add">添加记事本button>
    <br/>
    <ul>
        <li v-for="l,i in list">
            {{l}} <a href="javascript:;" @click="deleteRow(i)">删除a>
        li>
    ul>
    <br/>
    <span>总数量:{{list.length}} 条  span>
    <button v-show="list.length!=0" @click="deleteAll">删除所有button>
div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            list: ["北京好好学习网络有限公司", "北京天天向上网络有限公司", "北京不打游戏网络有限公司", "北京不处对象网络有限公司"],
            mes: ""
        },
        methods: {
            add() {
                if (this.mes!=""){
                    console.log(this.mes);
                    this.list.push(this.mes);
                }
                this.mes = ""
            },
            deleteRow(i) {
                this.list.splice(i, 1);//参数1 从哪个下标开始删除  参数2 删除几个元素
            },
            deleteAll() {
                this.list = []
            }
        }
    });
script>
body>
html>
  • 初始界面

Vue: ----- 记事本案例_第1张图片

  • 添加java c++

Vue: ----- 记事本案例_第2张图片

  • 点击删除

Vue: ----- 记事本案例_第3张图片
Vue: ----- 记事本案例_第4张图片

  • 点击删除所有
    Vue: ----- 记事本案例_第5张图片

你可能感兴趣的:(Vue,vue)