vue小练习

喵喵酱仔__

已于 2023-04-24 13:54:23 修改

阅读量64

点赞数

分类专栏： # 工具文章标签： vue.js javascript 前端

于 2023-04-24 12:36:40 首次发布

本文链接：https://blog.csdn.net/qq_38210427/article/details/130339923

版权

工具专栏收录该内容

23 篇文章 3 订阅

订阅专栏

1 记住密码提示框

Demo 在线地址：
01_06_记住密码提示框
---------------------------------------------------------------
ide: vscode
文件格式：.vue

<template>
  <div id="app">
    <div class="outer">
      <label 
      @mouseover="handleShow"
      @mouseout="handleHide"
      ><input type="checkbox">两周内自动登陆</label>
      <div class="tips" 
      v-show="show"
      >为了您的信息安全，请不要在网吧或公用电脑上使用此功能！</div>
    </div>
  </div>
</template>
<script>
export default {
  data:function(){
    return{
      show:false
    }
  },
  methods:{
    handleShow(){
      this.show = true
    },
    handleHide(){
      this.show=false
    }
  }
}
</script>

2 网页换皮肤

Demo 在线地址：

01_02_网页换肤

<template>
  <div id="app">
    <div class="outer">
      <ul class="skin">
        <li v-for="skin in skins" :key="skin.title"
         :class="[{current:skin.isActive}, skin.cla]"
         :title="skin.title"
         @click="handleChangeSkin(skin.cla)"
        >
          {{skin.value}}
        </li>
      </ul>
      <ul class="nav" :style="{background:activeColor}">
        <li v-for="(nav,index) in navs" :key="nav" :class="{last:index===navs.length-1}">
          <a href="#">{{nav}}</a>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data:function(){
    return{
      activeColor:'green',
      activeBackground:'#a3c5a8',      
      skins:[
        {
          cla:'red',
          title:'红色',
          value:'red',
          isActive:false
        },
        {
          cla:'green',
          title:'绿色',
          value:'green',
          isActive:true
        },
        {
          cla:'black',
          title:'黑色',
          value:'black',
          isActive:false
        }
      ],
      navs:['新闻','娱乐','体育','电影','音乐','旅游']
    }
  },
  methods:{
    handleChangeSkin(val){
      switch(val){
        case "red":
        for(var i=0;i<this.skins.length;i++){
          this.skins[i].isActive=false;
        }
        for(var i=0;i<this.skins.length;i++){
          if(this.skins[i].cla===val){
            this.skins[i].isActive=true;
          }
        }
        document.body.style.background="#ffdddd";
        this.activeColor='red';
        break;

        case "green":
        for(var i=0;i<this.skins.length;i++){
          this.skins[i].isActive=false;
        }
        for(var i=0;i<this.skins.length;i++){
          if(this.skins[i].cla===val){
            this.skins[i].isActive=true;
          }
        }
        document.body.style.background=this.activeBackground;
        this.activeColor='green';
        break;

        case "black":
        for(var i=0;i<this.skins.length;i++){
          this.skins[i].isActive=false;
        }
        for(var i=0;i<this.skins.length;i++){
          if(this.skins[i].cla===val){
            this.skins[i].isActive=true;
          }
        }
        document.body.style.background="#cccccc";
        this.activeColor='black';
        break;
      }
    }
  }
}
</script>

3 点击div变红色

Demo 在线地址：
01_04_点击将DIV变成红色

<template>
  <div id="app">
    <button @click="handleColor">点击将DIV变成红色</button>
    <div class="outer">
      <div v-for="n in 3" :key="n"
      :style="{background:activeColor}"
      ></div>
    </div>
  </div>
</template>
<script>
export default {
  data:function(){
    return{
      activeColor:'black'
    }
  },
  methods:{
    handleColor(){
      this.activeColor='red';
    }
  }
}
</script>

4鼠标移入改变样式鼠标移出恢复

Demo 在线地址：
01_05_鼠标移入改变样式鼠标移出恢复

<template>
  <div id="app">
    <div class="div1" :class="{hover:isHover}"
    @mouseover="handleMouseover"
    @mouseout="handleMouseOut"
    >鼠标移入改变样式，鼠标移出恢复。</div>
  </div>
</template>
<script>
export default {
  data:function(){
    return{
      isHover:false
    }
  },
  methods:{
    handleMouseover(){
      this.isHover=true
    },
    handleMouseOut(){
      this.isHover=false
    }
  }
}
</script>

5输入法

Demo 在线地址：
02_01_百度输入法

<template>
  <div id="app">
    <div class="outer">
      <button @click="handleShow">输入法</button>
      <ul class="ime" v-show="show">
        <li><a href="#">手写</a></li>
        <li><a href="#">拼音</a></li>
        <li class="close"
        @click="handleShow"
        ><a href="#">关闭</a></li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data:function(){
    return{
      show:false
    }
  },
  methods:{
    handleShow(){
      this.show=!this.show;
    }
  }
}
</script>

6 点击显示内容

Demo 在线地址：
02_02_点击div显示内容

<template>
  <div id="app">
    <div class="outer">
      <div v-for="item in list" :key="item" v-html="item"
      @click="handleInnerhtml(item)"
      >
        
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data:function(){
    return{
    list:[
      '<strong>新华网</strong>北京5月29日电(新华社记者)从三聚氰胺到瘦肉精，从染色馒头到毒豆芽，在食品中添加非食用物质和滥用食品添加剂已成为百姓餐桌上突出的"不安全因素"。近期以来，从北京到广东，从浙江到宁夏，一场打击食品非法添加的"风暴"席卷全国。',
      '4月21日，国务院部署严厉打击食品非法添加和滥用食品添加剂专项行动后，广东省高度重视，随即召开了全省电视电话会议。省委领导强调，食品安全是"高压线"，决不能"下不为例"；抓好食品安全要突出一个"<strong>严</strong>"字，做到<strong>严防</strong>、<strong>严查</strong>、<strong>严处</strong>。',
      '<strong>宁夏重点开展了四轮问题乳粉彻查清缴工作</strong>，对全区养殖源头、鲜奶收购和乳制品生产、经营、餐饮等环节的2.7万家单位进行了全面清查，共查处问题乳粉案件4起、涉案企业3家，吊销2家乳粉生产企业生产许可证。',
      '做好风险监测工作是许多地方加强食品安全的重点工作之一。在北京，<strong style="color:red;">全市设立了3000个风险监测点</strong>，建立了包括3000余种食品添加剂和非法添加物的数据库，对110家国内外食品相关组织、媒体发布的线索进行监测，及时进行风险评估，加强抽检控制。'
    ]
    }
  },
  methods:{
    handleInnerhtml(item){
      alert(item)
    }
  }
}
</script>

7 求数组中所有数字之和

Demo 在线地址：
02_03_求数组中所有数字的和

<template>
  <div id="app">
    <div class="outer">
      <label><input type="text" v-model="arr" @keyup="handleKeyup"><span>输入数字求和，数字之间用半角","号分隔</span></label>
      <p><button @click="handleSum">求和</button></p>
      <p>输入的数组是：{{arr}}</p>
      <strong class="sum">{{sum}}</strong>
    </div>
  </div>
</template>
<script>
export default {
  data:function(){
    return{
      arr:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],
      sum:''
    }
  },
  methods:{
    handleKeyup(){
      this.arr=this.arr.toString().replace(/[^(\d)|(,)]/,"").split(',');
    },
    handleSum(){
      this.sum='';
      //.arr=this.arr.toString().split(',');
      console.log(this.arr instanceof Array);
      this.sum=this.arr.reduce(function(prev, cur, index, array){
        return parseInt(prev) + parseInt(cur);
      })
    }
  }
}
</script>

8 弹出层

Demo 在线地址：

02_04_弹出层

<template>
  <div id="app">
    <div class="overlay" v-show="show"></div>
    <div class="win" v-show="show">
      <h2><span class="close" @click="handleClose">×</span></h2>
    </div>
    <button @click="handleShow">弹出层</button>
  </div>
</template>
<script>
export default {
  data:function(){
    return{
      show:false
    }
  },
  methods:{
    handleShow(){
      this.show=true;
    },
    handleClose(){
      this.show=false;
    }
  }
}
</script>

9鼠标移入改变图片透明度

Demo 在线地址：
02_06_鼠标移入移出改变图片透明度

<template>
  <div id=app>
    <ul class=imgList >
      <li v-for="(list, index) in lists" :key="index"
        :class="{current:list.isActive}"
        @mouseover=handleOver(index)
        @mouseout=handleOut(index)
      >
        <img  :src=list.src >
      </li>

    </ul>
  </div>
</template>
<script>

export default {
  
  data:function(){
    return{  
      lists:[
        {
          src:require('./assets/lesson2/1.jpg'),
          isActive:false
        },

        {
          src:require('./assets/lesson2/2.jpg'),
          isActive:false
        },

        {
          src:require('./assets/lesson2/3.jpg'),
          isActive:false
        },

        {
          src:require('./assets/lesson2/4.jpg'),
          isActive:false
        },

        {
          src:require('./assets/lesson2/5.jpg'),
          isActive:false
        },

        {
          src:require('./assets/lesson2/6.jpg'),
          isActive:false
        },

        {
          src:require('./assets/lesson2/7.jpg'),
          isActive:false
        },

        {
          src:require('./assets/lesson2/8.jpg'),
          isActive:false
        },

        {
          src:require('./assets/lesson2/9.jpg'),
          isActive:false
        },

        {
          src:require('./assets/lesson2/10.jpg'),
          isActive:false
        },


      ]   
    }
  },
  methods:{
    handleOver(index){
      //for(var i=0;i<this.lists.length;i++) this.lists[i].isActive=false;
      this.lists[index].isActive=true;  
    },
    handleOut(index){
      this.lists[index].isActive=false;
    }
  }

}
</script>

10 选项卡

Demo 在线地址：
02_07_简易选项卡

<template>
  <div id="app">
    <div class="outer">
      <ul class="tab">
        <li v-for="(lesson,index) in lessons" :key="lesson.name" :class="{current:lesson.isActive}"
        @mouseover="handleOver(index)"
        >
          {{lesson.name}}
        </li>
      </ul>
    <div class="content" >
      <ul v-for="(lesson, index) in lessons" :key="index" :class="{current:lesson.isActive}">
        <li v-for="content in lesson.content" :key="content">
          {{content}}
        </li>
      </ul>
    </div>
    </div>
  </div>
</template>
<script>
export default {
  data:function(){
    return{
      lessons:[
        {
          name:'第一课',
          content:[
          '网页特效原理分析',
          '响应用户操作',
          '提示框效果',
          '事件驱动',
          '元素属性操作',
          '动手编写第一个JS特效',
          '引入函数',
          '网页换肤效果',
          '展开/收缩播放列表效果'
          ],
          isActive:true
        },
        {
          name:'第二课',
          content:[
          '改变网页背景颜色',
          '函数传参',
          '高重用性函数的编写',
          '126邮箱全选效果',
          '循环及遍历操作',
          '调试器的简单使用',
          '典型循环的构成',
          'for循环配合if判断',
          'className的使用',
          'innerHTML的使用',
          '戛纳印象效果',
          '数组',
          '字符串连接'
          ],
          isActive:false
        },
        {
          name:'第三课',
          content:[
          'JavaScript组成：ECMAScript、DOM、BOM，JavaScript兼容性来源',
          'JavaScript出现的位置、优缺点',
          '变量、类型、typeof、数据类型转换、变量作用域',
          '闭包：什么是闭包、简单应用、闭包缺点',
          '运算符：算术、赋值、关系、逻辑、其他运算符',
          '程序流程控制：判断、循环、跳出',
          '命名规范：命名规范及必要性、匈牙利命名法',
          '函数详解：函数构成、调用、事件、传参数、可变参、返回值',
          '定时器的使用：setInterval、setTimeout',
          '定时器应用：站长站导航效果',
          '定时器应用：自动播放的选项卡',
          '定时器应用：数码时钟',
          '程序调试方法'
          ],
          isActive:false
        }
      ]
    }    
  },
  methods:{
    handleOver(index){
      for(var i=0;i<this.lessons.length;i++) this.lessons[i].isActive=false;
      this.lessons[index].isActive=true;
    }
  }
}
</script>

11 简易js年历

Demo 在线地址：
02_08_简易js年历

<template>
  <div id="app">
    <div class="calendar">
      <ul>
        <li v-for="item in calendar" :key="item.id" :class="{current:item.isActive}"
        @mouseover="handleOver(item.id)"
        >
          <strong>{{ item.id + 1}}</strong> {{ item.val }}
        </li>
      </ul>
      <div class="msg">
        <h2>
          <strong>{{mon}}</strong>
          月节日
        </h2>
        <p>{{mes}}</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data:function(){
    return{
      mon:'6',
      mes:'端午节：6月4日至6日放假3天。',
    calendar:[
      {
        id:0,
        val:'JAN',
        message:'元旦：1月1日至3日放假三天。',
        isActive:false
      },
      {
        id:1,
        val:'FER',
        message:'春节：2月2日至8日放假7天。',
        isActive:false
      },
      {
        id:2,
        val:'MAR',
        message:'妇女节：3月8日妇女节，与我无关。',
        isActive:false
      },
      {
        id:3,
        val:'APR',
        message:'清明节：4月3日至5日放假3天',
        isActive:false
      },
      {
        id:4,
        val:'MAY',
        message:'劳动节：4月30日至5月2日放假3天。',
        isActive:false
      },
      {
        id:5,
        val:'JUN',
        message:'端午节：6月4日至6日放假3天。',
        isActive:true
      },
      {
        id:6,
        val:'JUL',
        message:'小暑：7月7日小暑。不放假。',
        isActive:false
      },
      {
        id:7,
        val:'AUG',
        message:'七夕节：8月6日七夕节。不放假。',
        isActive:false
      },
      {
        id:8,
        val:'SEP',
        message:'中秋节：9月10日至12日放假3天。',
        isActive:false
      },
      {
        id:9,
        val:'OCT',
        message:'国庆节：10月1日至7日放假7天。',
        isActive:false
      },
      {
        id:10,
        val:'NOV',
        message:'立冬：11月8日立冬。不放假。',
        isActive:false
      },
      {
        id:11,
        val:'DEC',
        message:'艾滋病日:12月1日<br />废除奴隶制国际日:12月2日。',
        isActive:false
      },
    ]
        }
  },
  methods:{
    handleOver(id){
      console.log(this.calendar.length);
      for(var i=0;i<this.calendar.length;i++) this.calendar[i].isActive=false;
      this.calendar[id].isActive=true;
      this.mon=this.calendar[id].id + 1;
      this.mes=this.calendar[id].message;
    }
  }
}
</script>

12 单一按钮显示隐藏

Demo 在线地址：
02_09_单一按钮显示隐藏

<template>
  <div id="app">
    <div class="outer">
      <h2 @click="handleShow"
      :class="{open:show}"
      >播放列表...</h2>
      <ul v-show="!show">
        <li v-for="item in lists" :key="item">
          <a href="#">{{item}}</a>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data:function(){
    return{
      show:false,
      lists:[
        '玩家之徒 - 蔡依林',
        '原谅我就是这样的女生 - 戴佩妮',
        '猜不透 - 丁当',
        '自导自演 - 周杰伦',
        '浪漫窝 - 弦子',
        '流年 - 王菲'
      ]
    }
  },
  methods:{
    handleShow(){
      this.show=!this.show
    }
  }
}
</script>

13 提示效果

Demo 在线地址：
02_10_提示框效果

<template>
  <div id=app>
    <div class=outer>
      <h2>名车车标展示-鼠标移过显示车标</h2>
      <ul>
        <li  v-for="(item,index) in lists" :key=item.title :class="{zindex:item.isActive}">
          <a href=# :title=item.title
          @mouseover="handleAover(index)"
          @mouseout="handleAout(index)"
          ><strong>{{item.name}}</strong>{{item.val}}</a>
          <img
          @mouseover="handleAover(index)"
          @mouseout="handleAout(index)"
           :class="{current:item.isActive}" :src=item.src :alt=item.title>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data:function(){
    return{
      lists:[
        {
          title:'BMW 宝马汽车',
          name:'BMW',
          val:'宝马汽车',
          src:require('./assets/lesson2/1.jpg'),
          isActive:false,
        },

        {
          title:'Alfa Romeo 阿尔法-罗米欧',
          name:'Alfa Romeo',
          val:'阿尔法-罗米欧',
          src:require('./assets/lesson2/2.jpg'),
          isActive:false,
        },

        {
          title:'Skoda 斯柯达',
          name:'Skoda',
          val:'斯柯达',
          src:require('./assets/lesson2/3.jpg'),
          isActive:false,
        },

        {
          title:'Volkswagen 大众汽车',
          name:'Volkswagen',
          val:'大众汽车',
          src:require('./assets/lesson2/4.jpg'),
          isActive:false
        },

        {
          title:'Saab 萨布牌轿',
          name:'Saab',
          val:'萨布牌轿',
          src:require('./assets/lesson2/5.jpg'),
          isActive:false,
        },

        {
          title:'Lamborghini 兰博基尼',
          name:'Lamborghini',
          val:'兰博基尼',
          src:require('./assets/lesson2/6.jpg'),
          isActive:false,
        },

        {
          title:'Porsche 保时捷',
          name:'Porsche',
          val:'保时捷',
          src:require('./assets/lesson2/7.jpg'),
          isActive:false,
        },

        {
          title:'Peugeot 标致',
          name:'Peugeot',
          val:'标致',
          src:require('./assets/lesson2/8.jpg'),
          isActive:false,
        },

        {
          title:'Mercedes1 梅赛德斯 奔驰',
          name:'Mercedes1',
          val:'梅赛德斯 奔驰',
          src:require('./assets/lesson2/9.jpg'),
          isActive:false,
        },

        {
          title:'Buick 别克汽车',
          name:'Buick',
          val:'别克汽车',
          src:require('./assets/lesson2/10.jpg'),
          isActive:false,
        }
      ]
    }
  },
  methods:{
    handleAover(index){
      this.lists[index].isActive=true;

},
    handleAout(index){
      this.lists[index].isActive=false;

}
  }
}
</script>

14 鼠标移入修改图片路径

Demo 在线地址：
02_11_鼠标移过修改图片路径

<template>
  <div id=app>
    <ul class=box>
      <li class=first><img @load="handleLoad" :src="imgBig"><div :class="{current:isComplete}"></div></li>
      <li v-for="(item,index) in lists" :key="index">
        <a href=#>
          <img :src="item.src" @mouseover="handleOver(index)">
        </a>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data:function(){
    return{
      isComplete:false,
      imgBig:require('./assets/lesson2/big_1.jpg'),
      lists:[
        {src:require('./assets/lesson2/small_1.jpg')},
        {src:require('./assets/lesson2/small_2.jpg')},
        {src:require('./assets/lesson2/small_3.jpg')},
        {src:require('./assets/lesson2/small_4.jpg')},
        {src:require('./assets/lesson2/small_5.jpg')},
        {src:require('./assets/lesson2/small_6.jpg')},
        {src:require('./assets/lesson2/small_7.jpg')},
        {src:require('./assets/lesson2/small_8.jpg')},
        {src:require('./assets/lesson2/small_9.jpg')},
        {src:require('./assets/lesson2/small_10.jpg')},
        {src:require('./assets/lesson2/small_11.jpg')}
      ],
      listsBig:[
        {src:require('./assets/lesson2/big_1.jpg')},
        {src:require('./assets/lesson2/big_2.jpg')},
        {src:require('./assets/lesson2/big_3.jpg')},
        {src:require('./assets/lesson2/big_4.jpg')},
        {src:require('./assets/lesson2/big_5.jpg')},
        {src:require('./assets/lesson2/big_6.jpg')},
        {src:require('./assets/lesson2/big_7.jpg')},
        {src:require('./assets/lesson2/big_8.jpg')},
        {src:require('./assets/lesson2/big_9.jpg')},
        {src:require('./assets/lesson2/big_10.jpg')},
        {src:require('./assets/lesson2/big_11.jpg')}
      ]
    }
  },
  methods:{
    handleOver(index){
      var img=new Image();
      
      img.src=this.imgBig=this.listsBig[index].src;
      
      this.isComplete=true;
      img.complete ? (this.isComplete=false) : this.handleLoad();
    },
    handleLoad(){
      this.isComplete=false;
    }
  }
}
</script>

15复选框

Demo 在线地址：
02_12_复选框

<template>
  <div id=app>
    <dl>
        <dt>
          <input @click="handleCheckall" type=checkbox id=checkAll v-model="checkedAll"/>
          <label>{{selectVal}}</label>
          <a href=javascript:; @click="handleFanxuan">反选</a>
        </dt>
        <dd>
            <p v-for="list in lists" :key="list.val">
              <input :type="list.typ" :name="list.name" v-model="list.checked" @click="handleClick">
              <label>{{list.val}}</label>
            </p>
        </dd>
    </dl>
    <center>1、切换全选/全不选文字；2、根据选中个数更新全选框状态；</center>
  </div>
</template>
<script>
export default {
  data:function(){
    return{
      checkedAll:false,
      selectVal:'全选',
      lists:[
        {
          typ:'checkbox',
          name:'item',
          checked:false,
          val:'选项（一）'
        },
        {
          typ:'checkbox',
          name:'item',
          checked:false,
          val:'选项（二）'
        },

        {
          typ:'checkbox',
          name:'item',
          checked:false,
          val:'选项（三）'
        },

        {
          typ:'checkbox',
          name:'item',
          checked:false,
          val:'选项（四）'
        },

        {
          typ:'checkbox',
          name:'item',
          checked:false,
          val:'选项（五）'
        },

        {
          typ:'checkbox',
          name:'item',
          checked:false,
          val:'选项（六）'
        },

        {
          typ:'checkbox',
          name:'item',
          checked:false,
          val:'选项（七）'
        },

        {
          typ:'checkbox',
          name:'item',
          checked:false,
          val:'选项（八）'
        },

        {
          typ:'checkbox',
          name:'item',
          checked:false,
          val:'选项（九）'
        },

        {
          typ:'checkbox',
          name:'item',
          checked:false,
          val:'选项（十）'
        },

      ]
    }
  },
  methods:{
    handleCheckall(){
      for(var i=0;i<this.lists.length;i++){
        this.lists[i].checked=!this.checkedAll;
      }
      //this.selectVal=this.selectVal==='全选' ? '全不选' :'全选';
      this.isCheckAll()
    },
    handleFanxuan(){
      for(var i=0;i<this.lists.length;i++){
        this.lists[i].checked = !this.lists[i].checked;
      }
      this.isCheckAll()
    },
    isCheckAll(){
      for(var i=0,n=0;i<this.lists.length;i++){
        this.lists[i].checked && n++;        
      }
      //console.log(n);
      this.checkedAll = n === this.lists.length;
      this.selectVal=this.checkedAll ? '全不选' : '全选';
    },
    handleClick(){
      this.isCheckAll()
    }
  },
  updated(){
    this.isCheckAll()
  }
}
</script>

16paseint解析数字并求和

Demo 在线地址：
03_02_parseInt解析数字并求和

<template>
  <div id="app">
    <input type="text" class="f-text" v-model="number1" @keyup="handleNum1"> 
    <strong>+</strong>
    <input type="text" class="f-text" v-model="number2" @keyup="handleNum2">
    <strong>=</strong><span>{{sum}}</span>
    <input type="button" value="求和" @click="handleSum">
  </div>
</template>
<script>
export default {
  data:function(){
    return{
      number1:'',
      number2:'',
      sum:'?'
    }
  },
  methods:{
    handleNum1(){
      this.number1=this.number1.replace(/[^\d]/,'');
    },
    handleNum2(){
      this.number2=this.number2.replace(/[^\d]/,'');
    },
    handleSum(){
      (this.number1=='' || this.number2=='') ?
      alert('请输入数字!') :
      this.sum=parseInt(this.number1) + parseInt(this.number2);
    }
  }
}
</script>

17 累加按钮自加1

Demo 在线地址：
03_03_累加按钮自加1

<template>
  <div id="app">
    <input type="button" v-model="val" @click="handleClick">
  </div>
</template>
<script>
export default {
  data:function(){
    return{
      val:0
    }
  },
  methods:{
    handleClick(){
      ++this.val;
      alert(this.val);
    }
  }
}
</script>

18 比较大小

Demo 在线地址：
03_04_输入2个数字比较大小

<template>
  <div id="app">
    <input type="text" class="f-text" v-model="num1" @keyup="handleNum1">
    <strong>vs</strong>
    <input type="text" class="f-text" v-model="num2" @keyup="handleNum2">
    <input @click="handleBignum" type="button" value="最大的数是 »" class="f-btn"><span>{{which}}</span>
  </div>
</template>
<script>
export default {
  data:function(){
    return{
      num1:'',
      num2:'',
      which:'?'
    }
  },
  methods:{
    handleNum1(){
      this.num1=this.num1.replace(/[^\d]/,'');
    },
    handleNum2(){
      this.num2=this.num2.replace(/[^\d]/,'');
    },
    handleBignum(){
      (this.num1=='' || this.num2=='') ?
      alert('请输入数字!') :
      this.which=Math.max(this.num1,this.num2);
    }
  }
}
</script>

19 页面加载后累加自加1

Demo 在线地址：
03_05_页面加载后累加自加1

<template>
  <div id="app">
    {{val}}
  </div>
</template>
<script>
export default {
  data:function(){
    return{
      val:0
    }
  },
  methods:{
    updateNum(){
      ++this.val;
    }
  },
  mounted(){
    setInterval(this.updateNum,1000);
  }
}
</script>

20 判断是否是两个数

Demo 在线地址：
03_06_判断是否为两位数

<template>
  <div id="app">
    <input type="text" class="f-text" v-model="num" @keyup="handleNum">
    <input type="button" value="是否为两位数" @click="handleClick">
  </div>
</template>
<script>
export default {
  data:function(){
    return{
      num:''
    }
  },
  methods:{
    handleClick(){
      (this.num=='') ?
      alert('请输入数字！') :
      alert(/^\d{2}$/.test(parseInt(this.num)) ? '√ 是两位数' : "这是 "+this.num.length + ' 位数');
    },
    handleNum(){
      this.num=this.num.replace(/[^\d]/,'')
    }
  }
}
</script>

21网页计算器

Demo 在线地址：
03_07_网页计算器

<template>
  <div id=app>
    <div class=calc>
      <p>By - Ferris QQ:21314130</p>
      <input class=f-text type=text readonly maxlength=9 v-model=num1>
      <ul>
        <li v-for="item in lists" :key="item.val" :class="item.cla">
          <a :href=item.href
          @focus="handleFocus"
          @click="handleClick(item.val)"
          >{{item.val}}</a>
        </li>
        
      </ul>
      <input class="formula" type="text" readonly v-model="num2">
    </div>
  </div>
</template>
<script>
export default {
  data:function(){
    return{
      num1:0,
      num2:'',
      s:false,
      lists:[
        {
          cla:'btn-1',
          href:'javascript:void(0)',
          val:'c'
        },
        {
          cla:'btn-1',
          href:'javascript:void(0)',
          val:'%'
        },

        {
          cla:'btn-1',
          href:'javascript:void(1)',
          val:'÷'
        },

        {
          cla:'btn-1',
          href:'javascript:void(2)',
          val:'×'
        },

        {
          cla:'',
          href:'javascript:void(3)',
          val:'7'
        },

        {
          cla:'',
          href:'javascript:void(4)',
          val:'8'
        },

        {
          cla:'',
          href:'javascript:void(5)',
          val:'9'
        },

        {
          cla:'btn-1',
          href:'javascript:void(6)',
          val:'-'
        },

        {
          cla:'',
          href:'javascript:void(7)',
          val:'4'
        },

        {
          cla:'',
          href:'javascript:void(8)',
          val:'5'
        },

        {
          cla:'',
          href:'javascript:void(9)',
          val:'6'
        },

        {
          cla:'btn-1',
          href:'javascript:void(10)',
          val:'+'
        },

        {
          cla:'',
          href:'javascript:void(11)',
          val:'1'
        },

        {
          cla:'',
          href:'javascript:void(12)',
          val:'2'
        },

        {
          cla:'',
          href:'javascript:void(13)',
          val:'3'
        },

        {
          cla:'btn-2',
          href:'javascript:void(14)',
          val:'='
        },

        {
          cla:'btn-3',
          href:'javascript:void(15)',
          val:'0'
        },

        {
          cla:'',
          href:'javascript:void(16)',
          val:'.'
        },

      ]
    }
  },
  methods:{
    handleFocus(){
      blur();
    },
    handleClick(val){
      switch(val){
        case 'c':
        this.num1=0;
        this.num2='';
        break;

        case '%':
        this.count('%');
        break;

        case '÷':
        this.count('/');
        break;

        case '×':
        this.count('*');
        break;

        case '-':
        this.count('-');
        break;

        case '+':
        this.count('+');
        break;

        case '=':
        this.s || (this.num2 += this.num1);
        this.num1=eval(this.num2.toString().replace(/\%\/\*\-\+/,''));
        this.num1=this.num1.toString().substr(0,10).replace('NaN',0);
        this.s=true;
        break;

        case '.':
        if(this.num1.toString().search(/[\.\%\/\*\-\+]/) != -1)
        break;

        default:
        this.s && (this.num1=0, this.num2='', this.s=false);
        this.num1.toString().length < 10 && (this.num1=(this.num1 + val).replace(/^[0\%\/\*\-\+](\d)/,"$1"));

      }
    },
    count(a){
      if(this.s){
        this.num2=this.num1 + a;
        this.num1=a;
        this.s=false;
      }
      else{
        /[\%\/\*\-\+]$/.test(this.num1) || (this.num2 += this.num1);
        this.num1=a;
        /[\%\/\*\-\+]$/.test(this.num2) || (this.num2 += this.num1);
        this.num2=this.num2.slice(-1) != a ? this.num2.replace(/.$/,a) : this.num2;
      }
    }
  }
}
</script>

22简易网页时钟

Demo 在线地址：
https://sx00xs.github.io/test/26/index.html

<template>
  <div id="app">
    <div class="clock">
      <span>{{hours}}</span>点<span>{{mins}}</span>分<span>{{secs}}</span>秒
    </div>
  </div>
</template>
<script>
import { setInterval } from 'timers';
export default {
  data:function(){
    return{
      hours:'',
      mins:'',
      secs:''
    }
  },
  methods:{
    getTimes(){
      var date=new Date();
      this.hours=this.format( date.getHours());
      this.mins=this.format(date.getMinutes());
      this.secs=this.format(date.getSeconds());
    },
    format(a){
      return a.toString().replace(/^(\d)$/,'0$1');
    }
  },
  created(){
    this.getTimes();
  },
  mounted(){
    setInterval(this.getTimes,1000);
  }
}
</script>

23 倒计时

Demo 在线地址：
03_09_倒计时时钟

<template>
  <div id="app">
    <div class="countdown">
      <span>{{spanVal1}}</span>分钟<span>{{spanVal2}}</span>秒
      <input :class="{cancel:isCancel}" type="button" value=""
      @click="handleClick"
      >
    </div>
  </div>
</template>
<script>
function format(a){
  return a.toString().replace(/^(\d)$/,'0$1')
}
export default {
  data:function(){
    return{
      isCancel:false,
      spanVal1:'01',
      spanVal2:'40',
      timer:null
    }
  },
  methods:{
    handleClick(){
      !this.isCancel ? (this.timer=setInterval(this.updateTime,1000),this.updateTime()) : (clearInterval(this.timer));
      !this.isCancel ? this.isCancel=true : this.isCancel=false;
    },
    updateTime(){
      var Remain=this.spanVal1.replace(/^0/,'') * 60 + parseInt(this.spanVal2.replace(/^0/,''));
      if(Remain <= 0){
        clearInterval(this.timer);
        return;
      }
      Remain--;
      this.spanVal1=format(parseInt(Remain/60));
      Remain %= 60;
      this.spanVal2=format(parseInt(Remain));
    }
  }
}
</script>