<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.
<ol> <li>List-1</li> <li>List-2</li> </ol>
#id { color: #0110fb; }
var obj = {"site": "CoursesWeb.net", "pr": 5}; alert(obj.site);
$var = 8; if($var == 8) echo $var;