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

ゝ一纸荒年。 2022-07-13 06:29 186阅读 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 条评论，186人围观）

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

相关阅读

相关西门子PLC学习笔记十二-（转换与比较指令）

1.转换指令转换指令是将累加器1中的数据进行数据类型转换，转换结果仍放在累加器1中。其可实现BCD码与整数、整数与长整数、长整数与实数、整数的反码、整数的补码、实数求反等数

以你之姓@/ 2022年08月06日 03:29/ 0 赞/ 286 阅读

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

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

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

相关 VueJs学习汇总

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

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

相关 Linux操作指令学习笔记

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

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

相关 Vue学习笔记——内部指令

1、v-if: v-if：是vue 的一个内部指令，指令用在我们的html中。 v-if用来判断是否加载html的DOM，比如我们模拟一个用户登录状态，在

爱被打了一巴掌/ 2022年05月19日 02:35/ 0 赞/ 221 阅读

相关 vuejs学习笔记

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

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

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

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

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

相关 VueJS中学习使用Vuex详解

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

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

相关【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 赞/ 616 阅读

相关 Vue 学习笔记——指令

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

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