ES6字符串模板

这里做个简单的拓展,之前做vue组件时,经常用到拼接字符串,换行时用到,既费时又麻烦。这里介绍个ES6字符串模板方法

旧版拼接(各种换行拼接)

        Vue.component('obj-prop',{
            props:['blog'],
            template:'
                        <div class="obj_prop_div"><h2>{{blog.name}}</h2>
                        <p>内容为:{{blog.content}}</p>
                        <p>作者为:{{blog.author}}</p>
                        </div>
                    '
        });

新版方法(里面直接换行,不用拼接)

        Vue.component('obj-prop',{
            props:['blog'],
            template:`
                        <div class="obj_prop_div"><h2>{{blog.name}}</h2>
                        <p>内容为:{{blog.content}}</p>
                        <p>作者为:{{blog.author}}</p>
                        </div>
                    `
        });

输入`方式:CapsLk + ~,即可输出`

.

原文地址:https://www.cnblogs.com/fightjianxian/p/10601534.html