<!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. VMware 11安装Mac和Linux

    VMware 11安装Mac OS X 10.10_百度经验 https://jingyan.baidu.com/article/ff411625b9011212e48237b4.html?qq-pf ...

  2. IDA7.0安装keypatch和findcrypt-yara插件

    IDA7.0安装keypatch和findcrypt-yara插件 谢天谢地终于装上了,赶紧把方法写一下.找了半天网上的安装方法又繁琐有坑人,偏偏这个插件利用keystone对版本要求很高. Keyp ...

  3. 20165234 《Java程序设计》第九周学习总结

    第九周学习总结 教材内容学习 第十三章 Java 网络编程 URL 类 URL 类是 java.net 包中的一个重要的类,使用URL创建对象的应用程序称为客户端程序. 一个 URL 对象通常包含最基 ...

  4. 关于VXLAN的认识-----ovs+vxlan多链路负载分担的实现方法

    一.应用环境 目前大部分网关或服务器设备常采用双链路同时接入多条ISP链路的方式来满足网络的负载均衡和主备切换等,实现该功能常用的方法是利用策略路由技术,根据链路的网络状况和权重配置在路由时动态选择不 ...

  5. Python 面向对象【2】

    组合 [适合没干系的横向类,比如池塘,乌龟,鱼]  把类的实例化放到新类里面     属性名和方法名相同,属性会覆盖掉方法   绑定 方法需要实例才能被调用!! 这种限制即绑定 用self接受绑定   ...

  6. 【Linux】CentOS7.0下安装JDK环境

    写在前面:此次试验是在CentOS7上面安装的,亲测成功. 所需工具:JDK1.8安装包,xftp 具体步骤: 1,首先使用xftp连接到自己的虚拟机,然后查看是否有"/usr/java/j ...

  7. 虚拟机安装CentOS配置静态IP

    在VMware中安装Linux虚拟机后(比如CentOS6.*),不能访问网络,需要配置静态IP.虚拟机中推荐使用NET模式进行网络连接,在虚拟机的工具栏点击编辑>虚拟网络编辑器>NET模 ...

  8. HDFS-put: unexpected URISyntaxException

    目的:将某zip上传到HDFS某目录 [hdfs@mr1 jars]$ hadoop fs -put "20180720_155245 label.zip" /user/File/ ...

  9. 广联达 BIM5D 云平台---《建筑信息模型标准》解读

    广联达 BIM5D 云平台: 1.用户管理:  https://account.glodon.com/info 2.模型使用:  http://bim5d-hunan.glodon.com/api/v ...

  10. Fusebox 类似WEBPACK 的工具，React Studio

    Fusebox  类似WEBPACK 的工具,  http://fuse-box.org/ React Studio:  https://hackernoon.com/@reactstudio