JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
  <input v-model="name">
  <textarea v-model="text"></textarea>
  <p>
    <template v-for="(segment, index) in certification">
      <strong v-if="index">{{ name }}</strong>{{ segment }}
    </template>
  </p>
</div>

JavaScript

Vue.createApp({
  data () {
    return {
      text: 'Hello {name}. Goodbye {name}',
      name: 'Abcd'
    }
  },
  computed: {
    certification () {
      return this.text.split('{name}')
    }
  }
}).mount('#app')