<!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. 小程序学习(冒泡，快速创建文件，以及tarbar)

    1.关于小程序的事件冒泡机制 例如: <view catchtap="opp"> <text>当前内容</text> </view> ...

  2. Linux 逻辑卷管理LVM

    LVM概述 Logical Volume Manager,逻辑卷管理 屏蔽了底层磁盘布局,便于动态调整磁盘容量 需要注意:/boot分区用于存放引导文件,不能应用LVM机制 LVM结构 目标:将sdb ...

  3. exsi5.5以上版本支持虚拟机的二次虚拟化

    从存储里找到虚拟机的位置 下载并修改虚拟机的.vmx配置文件(记得做好备份) 打开<虚拟机名>.vmx文件,在末尾追加如下字段,保存退出. nce.enable = TRUE hyperv ...

  4. 阿里云上 配置 vsftpd 配置文件 （一个成功例子）

    # # READ THIS: This example file is NOT an exhaustive list of vsftpd options. # Please read the vsft ...

  5. elasticsearch入门笔记

    安装 注意:elasticsearch需要非ROOT用户启动 https://es.xiaoleilu.com/010_Intro/10_Installing_ES.html 下载elasticsea ...

  6. adapter.notifydatasetchanged()没有效果

    项目中有个列表的处理,通过一个参数判断是下拉刷新数据还是加载更多数据,结果下拉刷新就是显示不出来界面,数据是有,就开始searching~,搜出很多相关问题,大意如下: 1 当数据源发生变化的时候,我 ...

  7. h5中placeholder样式

    <!DOCTYPE html> <html> <head> <title>placeholder样式demo</title> <sty ...

  8. Linux就该这么学（3）-管道符、重定向与环境变量（学习笔记）

    1.Linux命令与文件读写操作有关的重定向技术: 学习目标:主要解决输出信息的保存问题. 标准覆盖输出重定向: 标准追加输出重定向 错误覆盖输出重定向 错误追加输出重定向 输入重定向 标准输入(ST ...

  9. Python代码打印出9*9 九九乘法表

    九九乘法表 一一 小问题展现技术 1.示例一 for i in range(10): s='' for j in range(1,i+1): s+=str(j)+'*'+str(i)+'='+str( ...

  10. CMake的一些正确姿势

    1, 2,