点击日志详情出现乱码修复之v-html的使用

问题

点击旅游攻略是正常显示文章内容的，而点击日志详情出现乱码修复

travel.vue

 点击日志详情出现乱码

travel_detail.vue

 看一下代码

travel.vue

<div class="content" v-html="item.content"></div>

travel_detail.vue

<div class="content">{{ detail.content }}</div>

 js部分相同 

data() {
    return {
      dialogVisible:false,
      form: {
        type: 3,
        id: "",
        page: 1,
      },
      send: {
        type: 3,
        link_id: "",
        content: "",
      },
      id: "",
      detail: {},
      comments: [],
      content:"",
      reply_id:""
    };
  },

由此得知，是没用到v-html指令解析的问题

使用v-html指令解决此问题

<div class="content" v-html="detail.content"></div>

修改如下地方，npm run build打包，把dist打包，让后台更新代码可以看到调试效果：

 

 

正常显示：

那v-html该怎么使用呢？

我们先在被vue实例挂载的标签div中，放入一个p或者div标签，在p标签内部写入v-html指令，<p v-html="name"></p> ，那么name的值哪里来呢？

这就需要在data中去定义了，对于普通的文本和v-text没有什么差异，但是对于html结构就不一样了，它就会被解析出来，如下代码：

 总结功能：

• v-html 指令的作用：设置元素的innerHTML
• 内容中有html结构会被解析为标签
• v-text指令无论内容是什么，只会解析为文本
• 解析文本使用v-text,需要解析html结构使用v-html