时间戳

首页 > 解决方案 > Vue.js - 如何从对象输出链接

javascript - Vue.js - 如何从对象输出链接

问题描述

我想从一个对象输出一个超链接。有可能这样做吗？

我目前在我的 store.js 中有这个，想用这个信息来输出

它在我的网站上以模态形式出现。我让它显示它，但 a href 输出为文本。

检查了这个，但这些解决方案都不适合我： 在 Javascript 对象数组中添加超链接

export default {
  photos: [
    {
      name: "fox1",
      image: "fox01.jpg",
      id: 1,
      header: "Photoshoot with Fox Apparel",
      description:
        "Photoshoot with " +
        '<a href="https://fox.jp/" target="_blank">Fox</a>' +
        ", a sustainably - driven e - retailer from Canada."
    }
]
}

标签： javascriptvue.js

解决方案

这是解决方案： https ://nexladder.com/vuejs-tutorial/vuejs-v-html-directive 

<!DOCTYPE html>
    <html lang="en">
    <head>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
         <div id="app">
           <div v-html="content"></div>
         </div>
         <script>
         new Vue ({
              el: '#app',
        data: {
                content: '<h2>Hello World</h2>'
        }
                 })
       </script>
     </body>
    </html>

推荐阅读