JSFiddle - React, Tailwind, and code Playground

by yoyosan

HTML

<div id = 'app'>
  <p :style = "{ color:z, fontSize:y }" >
 {{ isShow ? '這段文字根據isShow的值顯示或切換文字' : '另外一段文字，當isShow被切換'}}
  </p>
  <button @click ="toggle" :style = "{ color:x, fontSize:y }">
  切換開關
  </button>
 </div>
 
 <script src="https://cdn.jsdelivr.net/npm/vue@3.0.0/dist/vue.global.js"></script>

JavaScript

const {createApp} = Vue
createApp ({
  data() {
    return {
    isShow:true,
    x : 'green',
    y : '18px',
    z : 'red'
      };
     },
  methods : {
    toggle() {
      this.isShow = !this.isShow;
      if (this.isShow){
        this.z = 'red';
        this.y = '18px';
      }else {
        this.z = 'orange';
        this.y = '40px';

    }
    }
 }

}).mount('#app')