【前端】vue简单示例-计数器

短命女 2022-11-06 11:56 20阅读 0赞

点击加号或减号可进行数的增加和减小  
![在这里插入图片描述][20210309130809976.gif_pic_center]

1.  将vuejs下载,[下载网址][Link 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RoZUNoYW55_size_16_color_FFFFFF_t_70]  
2.

下载好的文件展示:![在这里插入图片描述][20210309125341985.png]  
复制粘贴到自己的web项目中  
直接用

标签引入(此标签可放在.html的任意位置)  
![此标签可放在.html的任意位置][.html]

方法一:

<body
    <div id="cout">
        <h2>当前计数:{
       {counter}}</h2>
        <button v-on:click="counter++">+</button>
        <button v-on:click="counter--">-</button>
    <div>
    <script>
        const cout = new Vue({
         
            el:'#cout',
            data:{
         
                counter:0
            }
        })
    </script>
    </body>

方法二:

<div id="cout">
    	<button v-on:click="add">+</button>
    	<button v-on:click="minus">-</button	
    </div>
    <script>
        const cout = new Vue({
         
            el: '#cout',
            data: {
         
                counter: 0
            },
            methods:{
         
                add:function (){
         
                    console.log('add已执行');
                    this.counter++;
                },
                minus:function () {
         
                    console.log('minus已执行');
                    this.counter++;
                }
            }
        })
    </script>

[20210309130809976.gif_pic_center]: /images/20221023/c8028ea1dc4f4d5e81b569a7821c7a3e.png
[Link 1]: https://cn.vuejs.org/v2/guide/installation.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RoZUNoYW55_size_16_color_FFFFFF_t_70]: /images/20221023/a334d2610ba143149514eadd6f5a6d99.png
[20210309125341985.png]: /images/20221023/bf579545c5e041bb96fd2955ae976e29.png
[.html]: /images/20221023/f3d1a7f765d64455a9ea7e65acc92c67.png