JSFiddle - React, Tailwind, and code Playground

by leisterbrau

HTML

<html lang="en">
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="module" src="static/main.js"></script>
  </head>
  <body>
    <div id="app">
      <p v-show="showCondition">Server side generated content, visibility based on vue condition</p> 
      <button type="button" v-on:click="toggle_message">Toggle</button>
    </div>
    <p>Server side content outside of vue target div</p>
  </body>
</html>

JavaScript

new Vue({
    el: '#app',
    data: {
       showCondition: true,
    },
    methods: {
       toggle_message: function(){
       		this.showCondition = ! this.showCondition;
    	 },
    },
});