<!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. Ubuntu16.04安装最新版nodejs

    原文链接:https://www.jianshu.com/p/2b24cd430a7d

  2. Markdown超链接及脚注

    Markdown链接及脚注 [时间:2017-02] [状态:Open] [关键词:markdown,标记语言,页内链接,超链接,脚注] 本文内容来自Markdown 11种基本语法,仅对其中我不熟悉 ...

  3. 百度echarts样式开发

    Echarts如何进行实例化 var a1 = null; a1= echarts.init(document.getElementById('a1')); a1.setOption({ color: ...

  4. Python备份MySQL数据库【转】

    #!/usr/bin/env python # coding: utf- import os import time ''' defined variable ''' databases=['hch' ...

  5. rsync+inotify实现实时同步案例【转】

    1.1 inotify介绍 inotify是一种强大的.细粒度的.异步的文件系统事件控制机制.linux内核从2.6.13起,加入了inotify支持,通过inotify可以监控文件系统中添加.删除. ...

  6. html单选按钮用jQuery中prop()方法设置

    模拟单选按钮时用jQuery,prop方法来设置. 赋默认选中值:$("#" + id).find("input:radio[value='" + state ...

  7. AIX系统下sed的用法与实例——查询/打印/替换字符串并生成文件/删除

    sed是AIX中非常重要的文本流编辑器,它对输入的文本进行查询/打印/替换/删除等操作,并将结果写到标准输出.sed 命令包含很多功能,用于选择要修改的行,并只对选择的行作更改. 首先,使用sed命令 ...

  8. struts2框架之输入校验（参考第二天学习笔记）

    输入校验: 1. 分类 客户端校验:javascript,它是用户体验而已,可以绕开. 服务器端校验 * 代码校验 1). 要求Action必须继承ActionSupport 2). 重写Action ...

  9. openwrt页面显示问题修改

    页面显示错误如下: 在不应该的位置显示了这个,查看配置文件: config igmpproxy        option quickleave '1' config phyint         o ...

  10. 快速解决PHP调用Word组件DCOM权限的问题

    1. 首先必须要在电脑上安装 Office 2. windows+r : 输入 dcomcnfg.exe 打开组件服务,然后双击 组件服务 ==> 双击 计算机 ==> 双击 我的电脑 = ...