用Vue的或多或少都很气这个奇葩的template

	template :"<div>典型电影:{{movie}}<br /><br />\
			时期:{{epoch}}<br />\
			来源:{{source}}<br />\
			<br /><br /><br />\
			真的{{German}}是德语\
			</div>"
      };




哪里加反斜杠不好说,动不动还报错。

在这里,给大家推荐几种更好的template写法,希望祝大家一臂之力:

推荐程度从高到低

1.X-Templates

<script type="text/x-template" id="foobar">
内容
</script>
之后就可以直接




template='#foobar'






来引用了,要注意必须有一个元素去闭合它们,机智如你:

template='<div>#foobar</div>'



2.Inline Templates

中文内联模板


<foobar inline-template>

内容
</foobar>



使用方法和上面的一样,要注意,这个也是HTML的格式,需要写在script标签外面。

也需要写在VUE配置之后,否则报错:我不认这个“<”


3.Render Function

渲染函数

一般是高端前端人员使用,像我一样没有足够时间去学习的,可以暂时只作了解。

它实现了精细化的模板生成,可以移步文档:Render


4.格式化字符串

直接在你要的模板上加上一对反引号,代替原来的普通引号,就可以随意换行不用自己排版了。但是要注意,这是ES6新增写法,所以……不兼容啊有时候

什么?你问我怎么打反引号!?



template=`我的模板`



5.普通写法

什么?你看了这么多方法还惦记着如何把“\”写对地方?

换行时候加!

还报错?

那你为何不换换方法?






Logo

前往低代码交流专区

更多推荐