JSFiddle - React, Tailwind, and code Playground

by nkovacs

HTML

<a v-on="click:test">Click me</a>
<a v-on="click:test2">Click me 2</a>
<div v-if="showList">
    <test-component v-repeat="1000"></test-component>
</div>

JavaScript

var component = {
    template: "<p>I'm a component {{test}}</p>",
    data: function() {
    	return {
            test: 'test'
		};
	}
};

Vue.component('test-component', component);

var app = new Vue({
    el: 'body',
    data: {
        showList: false
    },
    methods: {
        test: function() {
            var cons = Vue.extend(component);
            
            for (var i = 0; i < 10000; i++) {
                var child = this.$addChild({
                    el: document.createElement('span')
                }, cons);
                child.$appendTo(this.$el);
            }
        },
        test2: function() {
        	this.showList = true;
    	}
    }
});