<div id = 'demo'> <comp_test :elm_type="'h1,#0000ee,30,title'">Freedom is Free</comp_test> <comp_test :elm_type="'h3,#00ce00,25,h3tag'">To have peace I give peace.</comp_test> <comp_test :elm_type="'p,#ee0000,24,ptag'">The thought precedes perception.</comp_test> <comp_test :elm_type="'div,#1234fb,24,divtag'">Peace of mind, health of the body.</comp_test> </div> <script> Vue.component('comp_test',{ render : function(createElement){ //gets an array of values from the string added to elm_type attribute var a = this.elm_type.split(','); //creates and returns the DOM element with data from elm_type, and defined in the attrs object-parameter return createElement(a[0],{ attrs:{ style:'color:'+a[1]+';font-size:'+a[2]+'px;', id:a[3] } }, this.$slots.default //To use the text added in component ) }, //defines the prop required in each <comp_test> as a string props:{ elm_type:{ attributes: String, required: true } } }); var vm = new Vue({ el: '#demo' }); </script>
Freedom is Free
To have peace I give peace.
The thought precedes perception.
<table><tr> <th>Title 1</th> <th>Title 2</th> </tr></table>
.some_class { line-height: 150%; }
document.getElementById("id_button").onclick = function(){ window.open("http://coursesweb.net/"); }
$ar_dir = scandir("dir_name"); var_export($ar_dir);