# code-block-pro/1.27.7/build/shiki/samples/vue-html.sample

Code Block Pro – Beautiful Syntax Highlighting, version 1.27.7. 16 lines.

- Page: https://pluginprobe.com/plugins/code-block-pro/1.27.7/code/build/shiki/samples/vue-html.sample
- Raw: https://pluginprobe.com/plugins/code-block-pro/1.27.7/raw/build/shiki/samples/vue-html.sample
- Modified: 2023-09-03T01:04:34+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/code-block-pro/1.27.7/code/build/shiki/samples/vue-html.sample#L10-L20`.

```

<div>
  <button @click="insert">insert at random index</button>
  <button @click="reset">reset</button>
  <button @click="shuffle">shuffle</button>

  <TransitionGroup tag="ul" name="fade" class="container">
    <div v-for="item in items" class="item" :key="item">
      {{ item }}
      <button @click="remove(item)">x</button>
    </div>
  </TransitionGroup>
</div>

// From https://vuejs.org/examples/#list-transition

```