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>
  • 相关阅读:
    Async、Await
    CommandLineParser命令行解析类
    Dispose in c#
    授权oAuth
    Hadoop技术内幕1——源代码环境准备
    postgreSql——时区问题
    Linux命令3——c
    Linux命令2——b
    Linux命令1——a
    hadoop的Linux操作
  • 原文地址:https://www.cnblogs.com/tommymarc/p/11641338.html
Copyright © 2011-2022 走看看