JSFiddle - React, Tailwind, and code Playground

by kurotanshi

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<div id="app">

  <pre>items: {{ items }}</pre>
  
  <p>
    按下按鈕更新 items[0] ==> <input v-model="text">
  </p>

  <button @click="changeVal">update and alert</button>
</div>

SCSS

#app {
  display: block;
  padding: 1rem;
  font-size: 1.2rem;
}

li {
  list-style-type: disc;
}

p {
  margin: 1rem 0;
}

input {
  font-size: 1.2rem;
  padding: 3px 5px;
}

button {
  margin-top: 1rem;
}

JavaScript

const vm = new Vue({
  data: () => {
    return {
    	text: '08JS',
      items: ["Vue", "is", "Awesome"]
    }
  },
  methods: {
    changeVal () {
      this.items[0] = this.text;
      alert(this.items);
    }
  }
}).$mount('#app');