欢迎光临
我们一直在努力

Liquid 模板与 Vue 语法冲突的解决方案

默认情况下, Liquid 模板和 Vue 均使用双大括号输出内容(“Mustache”语法)。这导致在渲染一个包含 Vue 模板的 Liquid 文件时会因语法冲突而出错。

一个可行的方案是在 Liquid 模板中使用 raw 标签:

<%raw%>
{{ 'this is a vue string' }}<!-- vue 模板语法 -->
<%endraw%>

raw 标签中的内容不会被 Liquid 模板引擎解析而是会被直接输出。这虽然解决了冲突的问题,但这要求我们必须要写这个 raw 标签,在模板文件过长时也会给开发过程造成困惑,无法区分某个变量到底是属于 Liquid 模板还是属于 Vue :

<%raw%>
... 超多行的文本 ...
{{ product.title }} //?这到底是 liquid 的变量还是 vue 的变量?
... 超多行的文本 ...
<%endraw%>

幸运的是 Vue 提供了更改”插值符号”的能力。简单来说,我们可以在 Vue 使用双中括号(即: “[[” 和 “]]”)来代替双大括号。在 Vue 2.0 时代,可以使用以下代码实现上述功能:

var vm = new Vue({
    delimiters:['[[', ']]'],
    el:'#box',
    data:{
        arr:['apple','pear','grape']
    },
    methods:{
        add:function () {
            this.arr.push('tomato')
        }
    }
})

使用示例如下:

... 超多行的文本 ...
{{ product.title }} //这是 Liqnuid 的变量
[[ product.title ]] //这是 Vue 的变量
... 超多行的文本 ...

赞(2) 打赏
未经允许不得转载:码农很忙 » Liquid 模板与 Vue 语法冲突的解决方案

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

给作者买杯咖啡

非常感谢你的打赏,我们将继续给力更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏