JS中内联模板字符串是指什么?
慕桂英4014372浏览 855回答 4
4回答
-
手掌心
大神们不要把问题复杂化好不啦受到 HTML 本身的一些限制,像 <ul>、<ol>、<table>、<select> 这样的元素里允许包含的元素有限制，而另一些像 <option> 这样的元素只能出现在某些特定元素的内部。变通的方案是使用特殊的 is 特性应当注意，如果使用来自以下来源之一的字符串模板，则没有这些限制：-----------<script type="text/x-template">-----------JavaScript 内联模板字符串-----------.vue 组件这句话意思是：这样不可以<body> <div id="app"> <select> <optioncomp></optioncomp> </select> </div> <script src="lib/vue.js"></script> <script> new Vue({ el: '#app', components:{ 'optioncomp':{ template: '<option >a</option>' } } }) </script></body>但是用is特殊属性可以：<body> <div id="app"> <select> <option is="optioncomp"></option> </select> </div> <script src="lib/vue.js"></script> <script> new Vue({ el: '#app', components:{ 'optioncomp':{ template: '<option >a</option>' } } }) </script></body>或者temp模板标签也可以<body> <div id="app"> <select> <option is="optioncomp"></option> </select> <!--模板内容存放区域--> <script type="x-template" id="optioncompTemp"> <option >a</option> </script> </div> <script src="lib/vue.js"></script> <script> new Vue({ el: '#app', components:{ 'optioncomp':{ template: '#optioncompTemp' } } }) </script></body>或者内联模板字符串也行<body> <div id="app"> <selectcomp></selectcomp> </div> <script src="lib/vue.js"></script> <script> Vue.component('optioncomp',{ template: '<option >a</option>' }); new Vue({ el: '#app', components:{ 'selectcomp':{ template: ' <select> <optioncomp></optioncomp></select>' } } }) </script></body>当然了，单页应用的组件文件xxx.vue更是没问题了，就不演示了 -
HUWWW
类似于下面这种，可能含有mustache表达式的，同时支持es6模板字符串语法。<div id="app"> <checkbox-test></checkbox-test></div></body><script> var content="content-test"; Vue.component('checkbox-test', { template: `<div @click="check"> <div class="title">{{ title }}</div> <div class="title">${content}</div> </div>`, data() { return { checked: false, title: 'title-test' } }, methods: { check() { this.checked = !this.checked; } } }); window.vm=new Vue({ el:"#app", });</script>页面效果 -
紫衣仙女
//内联模板字符串Vue.component('component1',{ template: '<tr><td>child component</td></tr>'});Vue.component('component2',{ template: '<table><component1></component1></table>'});
随时随地看视频慕课网APP
相关分类
JavaScript