vue.js - 更改 Vue 中的分隔符？

问题描述

编辑：由于服务器端模板引擎，我必须更改分隔符......我确信这很明显，但只是为了清楚。

我将以下示例粘贴到我的应用程序中......它呈现但分隔符似乎不起作用，因为占位符没有被替换......我错过了什么？

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script>

    const tweets = [
        {
            id: 1,
            name: 'James',
            handle: '@jokerjames',
            img: 'https://semantic-ui.com/images/avatar2/large/matthew.png',
            tweet: "If you don't succeed, dust yourself off and try again.",
            likes: 10,
        },
        {
            id: 2,
            name: 'Fatima',
            handle: '@fantasticfatima',
            img: 'https://semantic-ui.com/images/avatar2/large/molly.png',
            tweet: 'Better late than never but never late is better.',
            likes: 12,
        },
        {
            id: 3,
            name: 'Xin',
            handle: '@xeroxin',
            img: 'https://semantic-ui.com/images/avatar2/large/elyse.png',
            tweet: 'Beauty in the struggle, ugliness in the success.',
            likes: 18,
        }
    ];

    Vue.component('activity-list', {
        template: `
            <div class="tweet">
              <div class="box">
                <article class="media">
                  <div class="media-left">
                    <figure class="image is-64x64">
                      <img :src="tweet.img" alt="Image">
                    </figure>
                  </div>
                  <div class="media-content">
                    <div class="content">
                      <p>
                        <strong><%tweet.name%></strong> <small><%tweet.handle%></small>
                        <br>
                        <%tweet.tweet%>
                      </p>
                    </div>
                      <div class="level-left">
                        <a class="level-item">
                          <span class="icon is-small"><i class="fas fa-heart"></i></span>
                          <span class="likes"><%tweet.likes%></span>
                        </a>
                      </div>
                  </div>
                </article>
              </div>
            </div>
         `,
        props: {
            tweet: Object
        }
    });

    const app = new Vue({
        el: "#activity-stream",
        data: {
            tweets
        },
        delimiters: ['<%', '%>']
    });

</script>

标签： vue.jsvuejs2vue-component

vue.js - 更改 Vue 中的分隔符？

问题描述

解决方案

推荐阅读