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

男娘i 2023-06-07 05:51 90阅读 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 条评论，90人围观）

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

相关阅读

相关前端学习日记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 赞/ 99 阅读

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

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

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

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

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

「爱情、让人受尽委屈。」/ 2023年06月07日 05:53/ 0 赞/ 70 阅读

相关前端学习日记Vue：mixin混入选项

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

比眉伴天荒/ 2023年06月07日 05:52/ 0 赞/ 49 阅读

相关前端学习日记Vue：watch选项与$watch实例方法

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

秒速五厘米/ 2023年06月07日 05:52/ 0 赞/ 92 阅读

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

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

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

相关前端学习日记Vue：v-model

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

梦里梦外;/ 2023年06月07日 03:27/ 0 赞/ 47 阅读

相关前端学习日记：

<style> \\{ margin: 0; padding: 0; l

た入场券/ 2023年06月06日 12:29/ 0 赞/ 84 阅读

相关前端学习日记：jQuery的each和map方法

方法语法：map() map(callback) 为包装集中的每一个元素调用回调函数，并将返回值收集到jQuery对象的实例中。参数 callback （函数）

心已赠人/ 2023年06月06日 12:02/ 0 赞/ 77 阅读

相关前端学习日记：变量

/\定义变量\/ var hahaha; /\变量赋值\/ hahaha=123;

我不是女神ヾ/ 2023年06月06日 08:18/ 0 赞/ 101 阅读