<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.
<input type="checkbox" name="a_name" value="value" checked="checked" />
#id { background:url("path_to_image.png"); background-size:contain; background-repeat:no-repeat; }
var rest8_7 = 8 % 7; alert(rest8_7);
$nr = ceil(3.5); echo $nr; // 4