PKTseng

<div id="app">
  <textarea v-model="message"></textarea>
  <h1>{{message}}</h1>
</div>

PKTseng

<div id="app">
  <textarea v-model="message"></textarea>
  <h1>{{message}}</h1>
</div>

PKTseng

<div id="app">
  <!--   多行字串 -->
<!--   <textarea type="text" v-model="message">message</textarea> -->
  <textarea @input="setMessage"></textarea>
  <pre>{{message}}</pre>
  
</div>

PKTseng

<div id="app">
<!--   <input type="text" v-model="message"> -->
  <input type="text" :value="message" @input="setMessage"> 
  <h1>{{message}}</h1>
</div>

PKTseng

<div id="app">
  <input type="checkbox" :checked="selected">
  <button @click="toggle">toggle</button>
</div>

PKTseng

<div id="app">
  <button :type="selected">selected</button>
</div>

PKTseng

<div id="app">
  <div class="box" @click.self="msg = 'c'">
    <div class="box" @click.self="msg = 'b'">
      <div class="box" @click.stop="msg = 'a'">
      </div>
    </div>
  </div>
  <h1>{{msg}}</h1>
</div>

PKTseng

<div id="app">
  <div class="box" @click="msg = 'c'">
    <div class="box" @click="msg = 'b'">
      <div class="box" @click="msg = 'a'">
      </div>
    </div>
  </div>
  <h1>{{msg}}</h1>
</div>

PKTseng

<div id="app">
  <div class="box" @click="msg = 'a'">
    <div class="box" @click="msg = 'b'">
      <div class="box" @click="msg = 'c'">
      </div>
    </div>
  </div>
  <h1>{{msg}}</h1>
</div>

PKTseng

修飾符-box

A Pen by PKTseng on CodePen.

License.