Vue基础篇操作和实现计数器

最新推荐文章于 2023-05-09 19:15:20 发布

南挽~

最新推荐文章于 2023-05-09 19:15:20 发布

阅读量156

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_55931917/article/details/124445140

版权

vue的 hello world

<!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8"/>
         <meta name="viewport" content="windth=device-width,initial-scale=1.0">
         <title>初始Vue</title>
         <script type="text/javascript" src="../js/vue.js"> </script>
     </head>
     <body>
    <div id="app">
        {{message}}
    </div>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/uve.js"></script>
           <script>
           var app = new Vue({
                el:"#app",
                data:{
                    message:"hello Vue! 你好小黑！！"
                }
            })
        </script>
        
         
     </body>
 </html>

用vue实现计数器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计数器</title>
    <script type="text/javascript" src="../js/vue.js"> </script>
</head>
<body>
    <div id="app">

        <div class="input-num">
            <button @click="sub">
                -
            </button>
            <span>{{num}}</span>
            <button @click="add">+</button>
        </div>
        <img src="http://www.itheima.com.images/logo.png" alt=""/>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/uve.js"></script>

         <script>

             var app=new Vue({
                el:"#app",
                data:{
                    num:1
                },
                methods:{
              add:function(){
                    if(this.num<10){
                        this.num++;
                    }else{

                        alert("已到最大值！！");
                    }
                },

            sub:function(){
                if(this.num>0){

                    this.num--;
                }
                else{
                    alert("已到最小值");
                }
            }
            }
             })
         </script>
</body>
</html>

南挽~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础篇操作和实现计数器

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta name="viewport" content="windth=device-width,initial-scale=1.0"> <title>初始Vue</title> <script type=...
复制链接

扫一扫