<!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. GPO - AppLocker

    AppLocker can help you: Define rules based on file attributes that persist across app updates, such ...

  2. C#中的类与对象

    类:说白了就是类型,是对具体事物的一种抽象总结. 对象:一个具体的事物. 类与对象的关系,类实例化就会得到一个对象,同样一个对象也应该属于某一个类.例如张三这个人,他是一个对象,同时他属于人类,在程序 ...

  3. tineMCE 踩坑：images_upload_handler

    tineMCE 的官方示例提供了前端上传图片方法 images_upload_handler 的写法. 但官方写的有点问题,上传会报错. 不过修改也很简单: images_upload_handler ...

  4. 【几何+模拟】二次元变换 计蒜客 - T3213

    题目 aslky 有一个 n×n 的矩形,每个位置上都有一个数,有 q 次操作,每次他会让你上下翻转 (UD),左右反转 (LR),顺时针旋转 90∘(SZ),逆时针旋转 90∘(NZ),请你输出最后 ...

  5. 手动造轮子——为Ocelot集成Nacos注册中心

    前言     近期在看博客的时候或者在群里看聊天的时候,发现很多都提到了Ocelot网关的问题.我之前也研究过一点,网关本身是一种通用的解决方案,主要的工作就是拦截请求统一处理,比如认证.授权.熔断. ...

  6. C#和 JS的闭包

    闭包的概念是内层的函数可以引用包含在它外层的函数的变量,即使外层函数的执行已经终止.但该 变量提供的值并非变量创建时的值,而是在父函数范围内的最终值. C#闭包可理解为跨作用域访问函数内变量,那么如何 ...

  7. maven项目原型（idea）

    1: internal -> appfuse-basic-jsf (创建一个基于Hibernate,Spring和JSF的Web应用程序的原型) 2: internal -> appfus ...

  8. Git别名和配置文件

    目录 备注: 配置别名 配置文件 备注: 本文参考于廖雪峰老师的博客Git教程.依照其博客进行学习和记录,感谢其无私分享,也欢迎各位查看原文. 配置别名 如果,如果这么神器的Git版本控制系统,可以简 ...

  9. 构建私有的verdaccio npm服务

    用了很长一段时间的cnpmjs做库私有库,发现两个问题 1. 最开始是mysql对表情emoij的支持不好,但由于数据库没办法调整所以只好把第三方库都清掉,只留私有库 2. mac 上面cnpm in ...

  10. python绝技：运用python成为顶级黑客|中文pdf完整版[42MB|网盘地址附提取码自行提取|

    Python 是一门常用的编程语言,它不仅上手容易,而且还拥有丰富的支持库.对经常需要针对自己所 处的特定场景编写专用工具的黑客.计算机犯罪调查人员.渗透测试师和安全工程师来说,Python 的这些 ...