Question

我想使用<code>块在Vue.js中显示代码。但是当我显示它时，代码就会丢失它的格式。我用Google搜索，发现我应该在每行之后添加<br>以使其工作。但我无法理解何时应该这样做。用户输入后？

Vue.component('view-form', {
    props: ['mycode'],
    template: `
        <div class="ViewCodeContainer">
            <code class="language-dart"> {{mycode}} </code>
        </div>`
})

Vue.component('past-form', {
    template: `<div><textarea placeholder="Your code here..." v-model=mycode></textarea></div>`,
    data () {
        return {
            mycode: ""
        }
    },
    methods: {
        sendClick(e) {
            bus.$emit('codechange', this.mycode);
        }
    }
})

var app = new Vue({
    el: '#app',
    data: {
        currentView: 'past-form',
        mycode: ''
    },
    methods: {
        sendCode() {
            this.currentView = 'view-form';
        }   
    }, 
    created() {         
        bus.$on('codechange', function(mycode) {
            this.mycode = mycode; // filling mycode from user input in HTML
        }.bind(this));
    }
})

我不想使用<pre>，因为<code>在语义上更正确。

Answer 1

如果您不想使用<pre>，您仍然可以更改<code>的显示方式。请参阅whitespace property。这是一个纯粹的CSS解决方案：

code {
    white-space: pre;
}

code {
  padding: 10px;
  display: block;
  white-space: pre;
  background-color: lightgrey;
}

<code>code {
  white-space: pre;
}</code>

使用带有Vue.js的标签`code`

1 个答案: