zoukankan      html  css  js  c++  java
  • Vue 事件的基本使用与语法差异

    "v-on:"可以简写为"@"

    "click"单击

    "dblclick"双加

    代码:

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="vue.js"></script>
        <title id="title">{{title}}</title>
    </head>
    <body>
    <div id="ask"><!--vue不能控制body和html的标签-->
        <ul>
            <li v-for="(v,k) in list">
               {{v.id}} ===== {{v.content}}
                <button @click="remove(v.id)">单击</button>
                <button @dblclick="remove(v.id)">双击</button>
    
            </li>
        </ul>
    </div>
    <script>
        var vue = function (options){new Vue(options)};
        vue({
            el:'#title',
            data:{
                title:'Vue 事件的基本使用与语法差异'
            }
        });
        var app = vue({
            el:'#ask',
            data:{
                search_content:'',
                content:'',
                list:[
                    {'id':3,'content':'hello'},
                    {'id':5,'content':'简单记录'},
                    {'id':2,'content':'个人博客'},
                    {'id':1,'content':'学习笔记'},
                    {'id':4,'content':'想学什么学什么 '}
                ]
            },
            methods:{
    
                remove(k){
                    console.log(k);
                }
    
            }
        });
    
    </script>
    </body>
    </html>
  • 相关阅读:
    计算机英语
    NSQ学习记录
    Java学习记录-注解
    VS插件开发

    双链表
    顺序表
    顺序队列
    顺序栈

  • 原文地址:https://www.cnblogs.com/tommymarc/p/11641338.html
Copyright © 2011-2022 走看看