Vue.js 小demo练习

最新推荐文章于 2025-08-23 13:32:21 发布

原创最新推荐文章于 2025-08-23 13:32:21 发布 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

Vue.js 专栏收录该内容

11 篇文章

订阅专栏

（1）跑马灯效果
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<div id="div1">
    <input type="button" value="跑起来" id="btn1" @click="lang">
    <input type="button" value="stop" id="btn2" @click="stop">
    <br>
    <h4>{{msg}}</h4>
</div>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script>
       var wm = new Vue({
           el:"#div1",
           data:{
                msg:"南京工业大学，我的母校~~！",
               intervalId: null
           },
           methods: {
               lang() {
                   if (this.intervalId != null) return;
                   this.intervalId = setInterval(() => {
                       var start = this.msg.substring(0, 1);
                       var end = this.msg.substring(1);
                       this.msg = end + start;
                   }, 400)
               },
               stop(){
                   clearInterval(this.intervalId);
                   this.intervalId = null;
               }
           }
           }

       )
    </script>
</body>
</html>

（2）简易计算器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    </style>
</head>
<body>
<div id="div1">
    <input type="text" value=""  v-model="n1">
    <select name="myselect" v-model="opt">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="text" value=""  v-model="n2">
    <input type="button" value="=" @click="calc()">
    <input type="text" value=""  v-model="result">
</div>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script>
      var vm = new Vue({
          el:"#div1",
          data: {
              n1:0,
              n2:0,
              result:0,
              opt:"+"
          },
          methods:{
              calc(){
        （======第一种写法==========）         
           switch(this.opt){
                      case "+":
                          this.result = parseInt(this.n1)+parseInt(this.n2);
                          break;
                      case "-":
                          this.result = parseInt(this.n1)-parseInt(this.n2);
                          break;
                      case "*":
                          this.result = parseInt(this.n1)*parseInt(this.n2);
                          break;
                      case "/":
                          this.result = parseInt(this.n1)/parseInt(this.n2);
                          break;
                  }

// （第二种写法，投机取巧的方法，正常开发中最好少用）
//   var codeStr = parseInt(this.n1) + this.opt + parseInt(this.n2);
//   this.result = eval(codeStr);

              }
              }

      })
    </script>
</body>
</html>

（3）v-for中key的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
<div id="div1">
    <div>
        ID值：<input type="text" v-model="id">
        Name: <input type="text" v-model="name">
        <input type="button" value="增加" @click="add">
    </div>

    <p v-for="user in list" :key="user.id"><input type="checkbox">{{user.id}}==={{user.name}}</p>
</div>
<script src="vue-dev/vue-dev/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#div1",
        data: {
            id:"",
            name:"",
            list:[
                {id:1,name:"周杰伦"},
                {id:2,name:"张杰"},
                {id:3,name:"王力宏"},
                {id:4,name:"林俊杰"},
            ]
        },
        methods:{
            add() {   // 添加方法
                this.list.unshift({id:this.id,name:this.name})
            }
        }
    })
</script>
</body>
</html>