<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style>

            #lb{

                list-style: none;

            }

            #lb li{

                position: relative;

                border-bottom: 1px solid black;

                width: 200px;

                height: 50px;

                line-height: 50px;

            }

            #xh{

                background-color: orange;

                padding: 10px;

                margin-right: 10px;

            }

            #qc{

                position: absolute;

                right: 0px;

                background-color: antiquewhite;

                padding: 2px;

                height: 30px;

                line-height: 30px;

            }

        </style>

    </head>

    <body>

        <!-- 新增（1、生成列表结构  v-for  和数组   2、获取用户输入  v-model   3、回车，新增数据 v-on .enter）

        --删除（数据改变和数据绑定的元素是同步变化的；时间的自定义参数；splice方法的应用）

        ---计数（统计信息个数length）

        --清除(点击清除所有信息  v-on)

        ---隐藏 (没有数据时隐藏  v-if  v-show)

         -->

        <h2>记事本</h2>

        <header id="top">

            <input type="text" v-model="mrvalue" @keyup.enter="add"/>

            <ul id="lb">

                <!-- v-for循环列出列表 -->

                <li v-for="(item,index) in list">

                    <!-- 前面的序号 -->

                    <span id="xh">{{index+1}}</span>

                    <!-- 列表内容 -->

                    <span>{{item}}</span>

                    <!-- 关闭按钮 -->

                    <!-- 添加点击移除事件，要传形参 -->

                    <span id="qc" @click="remove(index)">X</span>

                </li>

                <!-- v-指令   当不等于0时显示 -->

                <span v-if="list.length!=0">

                    {{list.length}}

                </span>

                <!-- v-show指令   当不等于0时显示 -->

                <button @click="clear" v-show="list.length!=0">clear</button>

            </ul>

        </header>

        <!-- 开发环境版本，包含了有帮助的命令行警告 -->

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

        <script>

            var top= new Vue({

                el:"#top",

                data:{

                    list:["学习","吃饭","睡觉"],

                    mrvalue:"好好学习，天天向上"

                },

               methods:{

                   // 输入添加

                   add:function(){

                       this.list.push(this.mrvalue);

                   },

                   // 将索引传递过来

                   remove:function(index ){

                       // console.log("删除");

                       // console.log(index);

                       // 按照索引删除

                       this.list.splice(index,1);

                   },

                   clear:function(){

                       this.list=[];

                   }

               }

            })

        </script>

        <!--

        总结：

         列表结构可以通过v-for 指令结合数据data获取

         v-on 结合事件修饰符可以对使劲按进行限制，比如.enter

         v-on 在绑定事件时可以传递自定义参数

         通过v-model 可以快速的设置和获取表单元素的值

         基于数据的开发方式

         -->

    </body>

</html>

效果图

vue.js中 v-for,v-on,v-model,结合应用案例---记事本的更多相关文章

  1. vue.js中，input和textarea上的v-model指令到底做了什么？

    v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...

  2. 实例分析Vue.js中 computed和methods不同机制

    在vue.js中,有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候,methods要加上() 2.我们可以使用 methods 来替代 comput ...

  3. Vue.js中使用select选择下拉框

    在Vue.js中使用select选择下拉框有两种方法: 第一种: Add.html: <select v-model="sysNotice.noticeType" id=&q ...

  4. vue.js 中双向绑定的实现---初级

    1. 1 我们看到的变量,其实都不是独立的,它们都是windows对象上的属性 <!DOCTYPE html> <html lang="en"> <h ...

  5. 浅析Vue.js 中的条件渲染指令

    1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...

  6. vue.js中的slot

    vue.js 中的 slot 一.slot 的作用 调用组件的时候,对于数据,我们会用props将数据从父组件传至子组件.但是,如果从父组件到子组件,单纯是页面局部渲染的改变,slot会更合适. 二. ...

  7. Vue.js中css的作用域

    Vue.js中的css的作用域问题: 如果在vue组件下的style中定义样式,效果会作用于整个html页面,如果只想本组件的css样式只作用于本组件的话,在<style>标签里添加sco ...

  8. vue.js 中 data, prop, computed, method，watch 介绍

    vue.js 中 data, prop, computed, method,watch 介绍 data, prop, computed, method 的区别 类型 加载顺序 加载时间 写法 作用 备 ...

  9. angular.js和vue.js中实现函数去抖（debounce）

    问题描述 搜索输入框中,只当用户停止输入后,才进行后续的操作,比如发起Http请求等. 学过电子电路的同学应该知道按键防抖.原理是一样的:就是说当调用动作n毫秒后,才会执行该动作,若在这n毫秒内又调用 ...

  10. vue.js 中使用（...）运算符报错的解决方法

    vue.js 中使用(...)运算符报错的解决方法 Syntax Error:Unexpected token(XX:X) }, computed:{ ...mapGetters([ 'pageSiz ...

随机推荐

  1. 集训作业 洛谷P1433 吃奶酪

    嗯?这题竟然是个绿题. 这个题真的不难,不要被他的难度吓到,我们只是不会计算2点之间的距离,他还给出了公式,这个就有点…… 我们直接套公式去求出需要的值,然后普通的搜索就可以了. 这个题我用的深搜,因 ...

  2. 将终结点图添加到你的ASP.NET Core应用程序中

    在本文中,我将展示如何使用DfaGraphWriter服务在ASP.NET Core 3.0应用程序中可视化你的终结点路由.上面文章我向您演示了如何生成一个有向图(如我上篇文章中所示),可以使用Gra ...

  3. springboot手动事务回滚

    亲测在使用@Transactional.@Transactional(rollbackFor = Exception.class)及catch异常之后 throw new RuntimeExcepti ...

  4. windows下nginx问题：[crit] 796#7096: *1 GetFileAttributesEx() "F: ginx-1.12.2\html\dist" failed (123: The filename, directory name, or volume label syntax is incorrect), client: 127.0.0.1, server: localho

    错误信息: 2019/09/09 13:54:37 [crit] 796#7096: *1 GetFileAttributesEx() "F: ginx-1.12.2\html\dist&q ...

  5. socket通信的三种实现方式

    三种 socket 的实现方式 nodejs 下的 socket 服务端代码 const net = require('net') const server = net.createServer() ...

  6. Android蓝牙读取短信调研

    对“直接通过蓝牙来获取连接手机的短信信息”这个需求做了一些技术调研,如下是调研过程中的一些记录. 1.无法得到BluetoothMasClient类 在文章https://blog.csdn.net/ ...

  7. SQLyog无操作一段时间后重新操作会卡死问题(解决办法)

    这种是因为一段时间不操作后,服务器将空闲连接丢弃了,而客户端(sqlyog)不知道,导致长时间无响应,而超时之后,sqlyog 使用了新的连接,所以又可以顺畅操作了. 将会话空闲时间默认改为自定义,填 ...

  8. 你一个 F12 能秒我？

    参考文章 思路决定成败:F12给了我黑色的眼睛我却用它来挖洞 前言 了解大佬的思路才知道自己现在学的到底有多浅. 还没有到点,我就已经进入状态了,生而为人,我很抱歉. F12 的骚操作 Element ...

  9. PHP quoted_printable_decode() 函数

    实例 对经过 quoted-printable 编码后的字符串进行解码,返回 8 位的 ASCII 字符串: <?php高佣联盟 www.cgewang.com$str = "Hell ...

  10. [C#] （原创）一步一步教你自定义控件——01，TrackBar

    一.前言 技术没有先进落后之分,只有合不合适. WinForm有着非常多的优点,在使用WinForm久了之后,难免会觉得WinForm自带的某些控件外观上有些许朴素.或者功能上有些不如意,自然而然便想 ...