javascript - 包含标签的字符串在 <td> 内无法正确呈现-6ren

javascript - 包含标签的字符串在内无法正确呈现

转载作者：行者123 更新时间：2023-11-28 16:49:18

26

4

我试图展示如何 **hello**将转换为hello并呈现为 hello。我为此制作了一个表格，您可以在 jsfiddle 中查看。

html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>The HTML5 Herald</title>
    <script src="js/scripts.js"></script>
  </head>
  <body>
    <div id="app">
    <table style="width:100%">
    <tr>
      <th>Input</th>
      <th>Output</th>
      <th>View</th>
    </tr>
    <tr v-for="example in examples" v-bind:key="example">
      <td>{{example.input}}</td>
      <td><pre>{{example.output}}</pre></td>
      <td>{{example.output}}</td>
    </tr>
  </table>
  </div>
  </body>
</html>

JS

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    examples: [{input:"**a**", output:"<b>a</b>"}]
  }
})

除了第三列，即 <td>{{example.output}}</td> 之外，一切正常。我检查该列已替换为 <td>a</td>来自检查员，但不应用粗体样式。和Vue有关系吗？当我输入值a时我可以看到粗体的字符串，而不是通过 vue 传递数据。我怎样才能使它有风格？

最佳答案

你的意思是这样的v-html吗？

new Vue({
  el: "#app",
  data: {
        message: 'Hello Vue!',
    examples: [{input:"**a**", output:"<b>a</b>"}, {input:"*a*", output:"<i>a</i>"}]
  },
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <table style="width:100%">
    <tr>
      <th>Input</th>
      <th>Output</th>
      <th>View</th>
    </tr>
    <tr v-for="(example, index) in examples" v-bind:key="index">
      <td>{{example.input}}</td>
      <td ><pre v-html="example.output"></pre></td>
      <td v-html="example.output"></td>
    </tr>
  </table>
</div>