<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>指令</title>
    <script src="js/AMjs/jquery.min.js"></script>
    <script src="js/AMjs/vue.min.js"></script>
    <style>
        .finished {
            text-decoration: underline;
            color: #4b72a4;
        }
        #box{
            margin: 200px auto;
        }
    </style>
</head>
<body>

<div id="box">
    <h1>{{title}}</h1>
    输入列表项:<input v-model="newItem" v-on:keyup.enter="addNew"/>
    <ul>
        <li v-for="item in items" v-bind:class="{finished: item.isFinished}"
            v-on:click="toggleFinish(item)">{{item.label}}</li>
    </ul>
</div>

<script>
    var box = new Vue({
        el: "#box",
        data: function () {
            return {
                title: '这是一个可操作的列表',
                items: [],
                newItem: ''
            }
        },
        methods: {
            toggleFinish: function (item) {
                item.isFinished = !item.isFinished;//点击有下划线，再次点击没有下划线
            },
            addNew: function () {
                this.items.push({
                    label: this.newItem,//实时改变的值
                    isFinished: false  //初始值默认为false
                });
                this.newItem = '';//按回车之后内容已输出至li ,输入框原来的内容理应清空
            }
        }
    });

</script>
</body>
</html>

注：

　　v-for：指令：当有数据需要循环展示时：就使用该指令输出

　　 v-bind 指令：:class=""结果是字符串或者布尔值

　　 v-text: 不会渲染标签，标签原样输出

　　 v-html:会渲染标签，标签不会原样输出

　　 v-model:代表新的，随着表单的不同而不同（也放在data里面，注意写法model 而不是modal）

vue指令的更多相关文章

  1. Vue指令总结---小白同学必看

    今天主要复习一下我们最熟悉vue指令,想要代码撸得快,就要多看书,多看看官方的文档和学习指令,学习编程是一个非常享受的过程,尤其是你不断地去解决问题,获得一项技能,实现薪水的上涨.进行Vue的指令烹饪 ...

  2. 一个能拖动，能调整大小，能更新bind值的vue指令-vuedragx

    一. 背景说明 开发一个可自定义组件化门户配置页面,期间采用了vue框架作为前端视图引擎,作为一个刚入手vue的萌新,开发第一个功能就遇到了拦路虎.需要一个拖动并且可改变大小的容器盒子.当时查看vue ...

  3. vue指令总结（二）

    一.vue指令 1.v-text v-text是用于操作纯文本,它会替代显示对应的数据对象上的值.当绑定的数据对象上的值发生改变,插值处的内容也会随之更新.注意:此处为单向绑定,数据对象上的值改变,插 ...

  4. vue指令与$nextTick 操作DOM的不同之处

    异步更新队列 可能你还没有注意到,Vue 异步执行 DOM 更新.只要观察到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变.如果同一个 watcher 被多次触发,只会被推 ...

  5. vue指令概览

    原文 简书原文:https://www.jianshu.com/p/5fd47b7422fd 大纲 1.什么是vue指令 2.向指令中传入参数 3.指令中带入修饰符 4.指令的缩写 5.常见的vue指 ...

  6. vue 指令中el 的 parentNode 为空的问题

    在项目中,突然发现在用vue指令的时候,发现元素el的父元素parentNode变成了null. 代码: if (el.parentNode && !Vue.prototype.$_h ...

  7. vue指令用法

    vue指令 指令式带有 v- 前缀的特殊特性v-text和v-html都属于指令将数据和dom做关联,当表达式的值改变时,响应式地作用在视图 解决大胡子语法闪烁案例 [v-cloak] { dispa ...

  8. Vue框架（一）——Vue导读、Vue实例（挂载点el、数据data、过滤器filters）、Vue指令(文本指令v-text、事件指令v-on、属性指令v-bind、表单指令v-model)

    Vue导读 1.Vue框架 vue是可以独立完成前后端分离式web项目的js框架 三大主流框架之一:Angular.React.Vue vue:结合其他框架优点.轻量级.中文API.数据驱动.双向绑定 ...

  9. Vue框架（二）——Vue指令（v-once指令、v-cloak指令、条件指令、v-pre指令、循环指令）、todolist案例、Vue实例（计算、监听）、组件、组件数据交互

    Vue指令 1.v-once指令  单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改) <!DOCTYPE html> <html lang=" ...

  10. vue指令大全~~~

    是的,这里有很全的vue指令使用~ 1.简单的vue应用 vue作为一个mvvm框架,想想为什么叫做mvvm? Model是负责数据的存储, View负责页面的展示 Model View 负责业务逻辑 ...

随机推荐

  1. IMX6开发板学习烧写Linux-QT系统步骤做个笔记

    平台:迅为-i.MX6开发板  烧写系统:Linux-QT   <ignore_js_op>   Qt系统的烧写,是使用 MfgTool2 工具,只需要简单的配置下.   打开 “Mfgt ...

  2. Jquery的一些常见用法

    谨以此文怀念我们大学的时光,Jquery3.4.0下载 https://code.jquery.com/jquery-3.4.0.min.js ⒈常用方法 $("#div1").h ...

  3. [转]python3之日期和时间

    转自:https://www.cnblogs.com/zhangxinqi/p/7687862.html#_label6 阅读目录 1.python3日期和时间 2.时间元组 3.获取格式化的时间 4 ...

  4. Centos6.8上httpd配置腾讯云SSL证书

    (1)先按装mod_ssl yum -y install mod_ssl /etc/httpd/conf.d/下会有一个ssl.conf的文件,打开 a)检测本地证书配置是否正确 主要是看下证书及密钥 ...

  5. Alpha 冲刺 （4/10）

    目录 摘要 团队部分 个人部分 摘要 队名:小白吃 组长博客:hjj 作业博客:冲刺4 团队部分 后敬甲 过去两天完成了哪些任务 文字描述 主页部分图标的替换 -拍照按钮的设计和测试 GitHub代码 ...

  6. 请求Jenkins链接返回403

    使用python请求Jenkins链接,返回403 1.使用正确的账号密码(Jenkins -> 系统设置 -> 全局安全设置),该账户拥有访问该Jenkins链接的权限 2.代码中的账号 ...

  7. windows的tasklist使用

    获取进程信息 tasklist # tasklist |findstr java.exe 杀死进程 方式1,通过进行pid杀死: taskkill /pid 4612 /f 方式2,通过名称杀死: t ...

  8. 【原创】运维基础之Ansible（2）离线安装

    1 在一个能访问远程repo的服务器上执行,下载ansible及相关依赖的rpm包 # mkdir ansible# yum install --downloadonly --downloaddir= ...

  9. java按照关键字指定的key删除redis(支持模糊删除)

    pom依赖: <dependency> <groupId>redis.clients</groupId> <artifactId>jedis</a ...

  10. linux强制将数据写入磁盘，防止丢失内存的数据

    sync命令文件系统管理 sync命令用于强制被改变的内容立刻写入磁盘,更新超块信息. 在Linux/Unix系统中,在文件或数据处理过程中一般先放到内存缓冲区中,等到适当的时候再写入磁盘, 以提高系 ...