前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >switch循环与@click

switch循环与@click

作者头像
我不是费圆
发布2020-12-17 11:18:43
1.1K0
发布2020-12-17 11:18:43
举报
文章被收录于专栏:鲸鱼动画
在这里插入图片描述
在这里插入图片描述

  工作稳定,继续发帖。


switch循环的用法:

代码语言:javascript
复制
	switch(this.sum){
        case 1:
          this.msg = "素衣云袖,古道悠悠"
          break;
        case 2:
          this.msg = "摸不到,皆是离愁";
          break;
    }

  传入一个参数,开始循环,参数可以是数字或布尔,switch等于是 if 加执行语句的简写,比如上面这段代码,如果用 if 语句来写,那就是:

代码语言:javascript
复制
	  if(this.sum===1){
        this.msg = ""
      }else if(this.sum===2){
        this.msg = ""
      }else if(this.sum===3){
        this.msg = ""
      }else{
        this.msg = ""
      }

  需要注意的是:switch循环每个分支后必须加上“break”,意为:执行此语句后跳出循环,举个例子:

代码语言:javascript
复制
    switch(i){
      case i>100:
        console.log("");
      case i>50:
        console.log("");
      case i>1:
        console.log("");
    }

  如果没有break 跳出循环,当满足第一个条件时,同时也满足了第二个,第三个条件。break 让循环只执行其中一个分支。 @click=“add”

代码语言:javascript
复制
    add:function(){
      this.sum++;
      switch(this.sum){
        case 1:
          this.msg = "素衣云袖,古道悠悠"
          break;
        case 2:
          this.msg = "摸不到,皆是离愁";
          break;
        case 3:
          this.msg = "酌一壶清酒";
          break;
        case 4:
          this.msg = "泛一泛轻舟";
          break;
        case 5:
          this.msg = "看一看扬州";
          break;
        case 6:
          this.msg = "折一世温柔";
          this.sum = 0;
          break;
      }
    }

完整代码:

代码语言:javascript
复制
<template>
  <div class="about">
    <h1>{{msg}}</h1>
    <button @click="add">next</button>
  </div>
</template>
<script>
export default {
  data(){
    return{
      sum:1,
      msg:'素衣云袖,古道悠悠'
    }
  },
  created:function(){
    console.log("xxx");
  },
  methods:{
    add:function(){
      this.sum++;
      switch(this.sum){
        case 1:
          this.msg = "素衣云袖,古道悠悠"
          break;
        case 2:
          this.msg = "摸不到,皆是离愁";
          break;
        case 3:
          this.msg = "酌一壶清酒";
          break;
        case 4:
          this.msg = "泛一泛轻舟";
          break;
        case 5:
          this.msg = "看一看扬州";
          break;
        case 6:
          this.msg = "折一世温柔";
          this.sum = 0;
          break;
      }
    }
  }
}
</script>
<style scoped>
  h1{
    color:rgb(216, 79, 79);
    font-size: 40px;
    font-family: 华文行楷;
    background: linear-gradient(135deg,#409EFF,#E6A23C);
    -webkit-background-clip:text;
    color: transparent;

  }
  button{
    width:80px;
    height: 40px;
    margin: 10px 0;
    border-radius:10px;
    background: linear-gradient(45deg, #f55,#ff9);
    outline: none;
  }
</style>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020/11/20 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档