switch循环与@click

我不是费圆

发布于 2020-12-17 11:18:43

1.1K0

发布于 2020-12-17 11:18:43

文章被收录于专栏：鲸鱼动画

工作稳定，继续发帖。

switch循环的用法：

	switch(this.sum){
        case 1:
          this.msg = "素衣云袖，古道悠悠"
          break;
        case 2:
          this.msg = "摸不到，皆是离愁";
          break;
    }

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

	  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”，意为：执行此语句后跳出循环，举个例子：

    switch(i){
      case i>100:
        console.log("");
      case i>50:
        console.log("");
      case i>1:
        console.log("");
    }

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

    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;
      }
    }

完整代码：

<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 删除

add