JSFiddle - React, Tailwind, and code Playground

by nkovacs

HTML

<script src="https://rawgit.com/yyx990803/vue/master/dist/vue.js"></script>
<p><span v-pre>{{test | quote foo bar}}</span>: {{test | quote foo bar}}</p>
<p><span v-pre>{{test | quote "foo bar"}}</span>: {{test | quote "foo bar"}}</p>
<p><span v-pre>{{test | quote 'foo bar'}}</span>: {{test | quote 'foo bar'}}</p>
<p><span v-pre>{{test | quote '"foo bar"'}}</span>: {{test | quote '"foo bar"'}}</p>
<p><span v-pre>{{test | quote "'foo bar'"}}</span>: {{test | quote "'foo bar'"}}</p>
<p><span v-pre>{{test | quote 'foo bar"}}</span>: {{test | quote 'foo bar"}}</p>

With trim:

<p><span v-pre>{{test | quoteTrim foo bar}}</span>: {{test | quoteTrim foo bar}}</p>
<p><span v-pre>{{test | quoteTrim "foo bar"}}</span>: {{test | quoteTrim "foo bar"}}</p>
<p><span v-pre>{{test | quoteTrim 'foo bar'}}</span>: {{test | quoteTrim 'foo bar'}}</p>
<p><span v-pre>{{test | quoteTrim '"foo bar"'}}</span>: {{test | quoteTrim '"foo bar"'}}</p>
<p><span v-pre>{{test | quoteTrim "'foo bar'"}}</span>: {{test | quoteTrim "'foo bar'"}}</p>
<p><span v-pre>{{test | quoteTrim 'foo bar"}}</span>: {{test | quoteTrim 'foo bar"}}</p>

JavaScript

Vue.filter('quote', function(value, parameter) {
    return parameter
})

Vue.filter('quoteTrim', function(value, parameter) {
    // mismatched quotes are stripped by vue
    return parameter.replace(/^['"]|['"]$/g, '')
})


new Vue({
    el: 'body',
    data: {
    },
    methods: {
    }
})