前端学习日记Vue：Vue的Methods选项

男娘i 2023-06-07 05:51 5阅读 0赞

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <script type="text/javascript" src="../assets/js/vue.js"></script>  
        <title>Methods Option Demo</title>  
    </head>  
    <body>  
        <h1>Methods Option Demo</h1>  
        <hr>  
        <div id="app">  
            \{ \{a\}\}  
              
            <p><button @click.native="add(1,$event)">add</button></p>  
            <p>  
                  
                <btn v-on:click.native="add(2)"></btn>  
            </p>  
        </div>  
        <button οnclick="app.add(3)">外部访问构造器里的方法</button>

<script type="text/javascript">  
            var btn = \{  
                template: '<button>外部组件</button>'  
            \}  
            var app = new Vue(\{  
                el: '\#app',  
                data: \{  
                    a: 1  
                \},  
                methods: \{  
                    add: function(num,event) \{  
                         if(num)\{  
                              this.a += num;  
                              // return this.a += num;  
                         \}else\{  
                             this.a++;  
                         \}  
                         console.log(event);  
                    \}  
                \},  
                components: \{  
                    "btn": btn  
                \}  
            \})  
        </script>  
    </body>  
</html>

发表评论取消回复

表情：

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

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

相关阅读

相关前端学习日记js3：习题

//1.顺序排序 // var arr=[15,23,35,60,120,-5,-60,-61,-120],min=0; var arr=[15,23,

ゞ浴缸里的玫瑰/ 2023年06月11日 09:26/ 0 赞/ 3 阅读

相关前端学习日记Vue：export default

　　Vue 是通过 webpack 实现的模块化，因此可以使用 import 来引入模块。　　此外，你还可以在 bulid/webpack.base.conf.js 文件中

r囧r小猫/ 2023年06月07日 08:11/ 0 赞/ 8 阅读

相关前端学习日记Vue：Vue的Methods选项

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

男娘i/ 2023年06月07日 05:51/ 0 赞/ 6 阅读

相关前端学习日记：内边距与外边距

<style type="text/css"> /\ 内边距：同时定义四个内边距：

朱雀/ 2023年06月06日 08:19/ 0 赞/ 271 阅读

相关 XML学习日记

学习日记01 XMl语法: 1. 文档声明: 在编写XML文档时,需要先使用XML文档声明,声明XML文档的类型最简单的文档声明语法:<?xml version=

Bertha 。/ 2022年12月23日 09:41/ 0 赞/ 260 阅读

相关学习日记

1、<input>与<button>标签的主要区别: <button>的值并不是写在value属性里，而是在起始、关闭标签之间。同时<button>的值很广泛，有文字、图像、

忘是亡心i/ 2022年06月09日 02:12/ 0 赞/ 182 阅读

相关二十二、Methods Option 方法选项

Methods Option 方法选项 <!DOCTYPE html> <html lang="en">

谁践踏了优雅/ 2022年05月03日 09:58/ 0 赞/ 200 阅读

相关 vue学习日记

介绍： 1.创建vue项目 //桌面打开命令窗口 npm和cnpm都行，建议cnpm快很多，还不容易出错（前提是你安装了淘宝镜像cnpm） cnpm instal

谁践踏了优雅/ 2022年04月10日 12:54/ 0 赞/ 272 阅读

相关前端_JavaScript_Method

//parseInt方法用于将字符串转为整数，遇到不能转为数字的字符，返回转化的。参数的第一个字符不能转换直接返回NaN parseIn

布满荆棘的人生/ 2022年03月08日 12:54/ 0 赞/ 139 阅读

相关 Servlet学习日记

Servlet学习日记服务端跳转和客户端跳转的区别： if ("admin".equals(name) && "123".equals(password)) ...

你的名字/ 2020年11月07日 01:43/ 0 赞/ 708 阅读