<!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. org.springframework.beans.factory.CannotLoadBeanClassException-估计mapper出参 和 po字段不对应了

    DEBUG [localhost-startStop-1] - Ignoring bean class loading failure for bean 'itemsService'org.sprin ...

  2. super和this的区别

    this.:this加点指此时代表当前对象,能操作当前类里面的所有属性及方法以及父类继承而来能被访问修饰符允许的属性和方法.super.:此时指代当前对象类的父类对象部分,不能操作到本类的属性和方法, ...

  3. GB GBRT XgBoost

    https://blog.csdn.net/github_38414650/article/details/76061893 https://www.cnblogs.com/wxquare/p/554 ...

  4. 音乐app各部分笔记（二）

    7-15播放器progress-circle圆形进度条组件实现 1.首先是引入三步  progress-circle 引入到player.vue中 然后就是 SVG技术 值得注意的事   svg 中 ...

  5. ubuntu14.04升级mysql5.5至mysql5.7

    原文链接:https://www.cnblogs.com/os-python/p/6842485.html 1.下载mysql-apt的配置包,并安装 wget https://dev.mysql.c ...

  6. SFTP远程连接服务器上传下载文件-vs2013项目实例

    本项目仅测试远程连接服务器,支持上传,下载文件,更多功能开发请看API自行开发. 环境:win7系统,vs2013 vs2013项目实例下载地址:CSDN下载 如果没有CSDN积分,百度网盘下载(密码 ...

  7. python基础-----列表操作

    在Python中用[]来表示列表,并用逗号隔开其中的元素. 1.访问列表元素 name=["zhangsan","lisi","ljy"] ...

  8. gradle记录

    set-env.bat set "JAVA_HOME=G:\jdk" set "CLASSPATH=%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\ ...

  9. [转] Torch中实现mini-batch RNN

    工作中需要把一个SGD的LSTM改造成mini-batch的LSTM, 两篇比较有用的博文,转载mark https://zhuanlan.zhihu.com/p/34418001 http://ww ...

  10. go 单引号，双引号，反引号区别

    go里面双引号是字符串,单引号是字符,不存在单引号字符串. 但有反引号字符串,就是esc键下面1键左边tab键上面那个键,区别是反引号字符串允许换行符