vue中的元素转换

众所周知 元素转换一般用v-if 和 v-show，但是单纯使用方法也是可以实现的

例如：现有一段话，点击按钮后将他变换为另外一句话，在 次点击按钮后在变回为原来的话，可重复一直操作

1、定义一个盒子 存放一句话 初始值是'这是一段话'，定义一个按钮 触发点击换话事件

<div id="Look">{{look}}</div>
<button @click="myFunction">try</button>

2、在data中定义初始值和想要控制的变量，想法是通过控制i的值，显示不同的话，i=0时是初始值，i=1时是变换后的

 data(){
        return{
          //look初始值
            look:'这是一段话',
          //通过i的数值，确定当前显示那句话
            i: 0, 
        }
  },

3、触发方法

myFunction(){
        //当i = 0 时候
       if(this.i === 0 ){
        //显示 已经被修改为：春眠不觉晓
       this.look = '这是一段话';
        // i++ 此时i = 1
       this.i++;
       console.log(this.look,this.i);
    }else if( this.i === 1){
        this.look = '已经被修改为：春眠不觉晓';
        console.log(this.look,this.i);
        this.i--;
                }    
          },