vue.js学习笔记（二）--指令的使用

ゝ一纸荒年。 2022-07-13 06:29 111阅读 0赞

> 博客地址：[https://fisher-zh.github.io][https_fisher-zh.github.io]

vue之实现列表的添加点击。  
使用指令：v-on v-for v-on v-bind v-model  
html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue.js</title>
        <style> body { font-family: "\5FAE\8F6F\96C5\9ED1"} .red { color: red;} body > div { width: 200px; margin: 50px auto; } </style>
    </head>
    <body>
        <div id="app">
            <h3>vue——列表的添加</h3>
            <input type="text" v-model="newitem" v-on:keyup.enter="clickKey">
            <ul>
                <li v-for="item in items" v-text="item.event" v-bind:class="{red:item.isFinish}" v-on:click="liClick(item)"></li>
            </ul>
        </div>
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <script src="testvue.js"></script>
    </body>
    </html>

js

window.onload = function() { 
        Vue.component("todo-item", {
            props: ["todo"],
            template: "<li>{ {todo.text}}</li>"
        })
        var app = new Vue({
          el: '#app',
          data: {
            items: [
            ],
            newitem: ''
          },
          methods: {
            liClick: function (item) { 
                item.isFinish = !item.isFinish;
            },
            clickKey: function () { 
                this.items.push({
                    event: this.newitem,
                    isFinish: false
                })
                this.newitem = '';
            }
          }
        });
    }

[https_fisher-zh.github.io]: https://fisher-zh.github.io

发表评论取消回复

表情：

评论列表（有 0 条评论，111人围观）

还没有评论，来说两句吧...

相关阅读

相关 angularjs学习笔记—指令input

input\[text\] input一般和ngModel结合使用来实现双向绑定，同时angular提供了很多表单校验的指令 required 必填 ngR

阳光穿透心脏的1/2处/ 2022年09月25日 03:26/ 0 赞/ 185 阅读

相关 vue.js学习笔记（二）--指令的使用

> 博客地址：[https://fisher-zh.github.io][https_fisher-zh.github.io] vue之实现列表的添加点击。使用指令：v

ゝ一纸荒年。/ 2022年07月13日 06:29/ 0 赞/ 112 阅读

相关 angular学习整理（二）---指令

接着上文说其实在angularjs中。最复杂的一部分就是指令了（directive），指令的主要作用就是用来操纵和修改DOM，我们既可以使用angular提供的指令，也可以

墨蓝/ 2022年07月12日 05:36/ 0 赞/ 150 阅读

相关 VueJs学习汇总

最近更新时间：2017年6月2日16:58:06 [《我的博客地图》][Link 1] 前端的框架很多，需要不断的摸索和学习，截止20170602已经接触和使

落日映苍穹つ/ 2022年06月15日 12:11/ 0 赞/ 423 阅读

相关 Linux操作指令学习笔记

摘抄总结了一些常用的操作指令，不很全面，主要是常用的用于学习记忆掌握一、通配符 Shell提供了一种通配符（wildchar） \ ：代表0,1,more,cha

妖狐艹你老母/ 2022年06月02日 03:41/ 0 赞/ 205 阅读

相关 vuejs学习笔记

把一个对象所有元素打印出来对象： editRoomData: { id: "", roomNo:""

Bertha 。/ 2022年05月01日 12:10/ 0 赞/ 190 阅读

相关 Linux防火墙iptables学习笔记（二）参数指令

iptables \[-t table\] command \[match\] \[-j target/jump\] \-t 参数用来指定规则表，内建的规则表有三个，分别是

向右看齐/ 2022年02月05日 00:49/ 0 赞/ 194 阅读

相关 VueJS中学习使用Vuex详解

[转载https://segmentfault.com/a/1190000015782272][https_segmentfault.com_a_119000001578227

梦里梦外;/ 2021年09月30日 05:58/ 0 赞/ 340 阅读

相关【Vue 学习】- VueJS 常用系统指令

目录 1 v-on 指令 1.1 v-on:click 1.2 v-on:keydown 1.3 v-on:mouseover 1.4 事件修饰符 1.5 按键修饰

太过爱你忘了你带给我的痛/ 2021年09月21日 00:56/ 0 赞/ 562 阅读

相关 Vue 学习笔记——指令

指令 (Directives) 是带有 `v-` 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式。指令的职责是，当表达

女爷i/ 2021年07月24日 22:38/ 0 赞/ 395 阅读