Question

我做了pen。使用Vue.js的简单标签。

每个标签都会从此对象获取内容：

var tabs = [
  {
    title: "Pictures",
    content: "Pictures content"
  },
  {
    title: "Music",
    content: "Music content. Wanna see some <a @click.prevent=\"show = 3\">Documents</a> content?"
  },
  {
    title: "Videos",
    content: "Videos content."
  },
    {
    title: "Documents",
    content: "Documents content. Wanna see some <a @click.prevent=\"show = 1\">Music</a> content?"
  },   
];

呈现每个标签内容：

<div v-for="(tab, index) in tabs" v-if="show == index" :key="index" v-html="tab.content"></div>

我一直试图在'tab.content'工作上制作那些点击指令:(我错过了什么吗？

提前致谢。

Answer 1

SELECT SUBSTRING(SUBSTRING_INDEX(col, '"', -2), 1, INSTR(SUBSTRING_INDEX(col, '"', -2), '"') - 1) AS num FROM yourTable;不是Vue内容，对于元素来说只是v-html。您将无法在innerHTML内容中使用Vue指令或组件（！）。

您可以做的是在组件内捕获并处理a native click event。 v-html很方便。

transition-group

const tabs = [{
    title: "Pictures",
    content: "Pictures content"
  },
  {
    title: "Music",
    content: "Music content. Wanna see some <a data-show=\"3\">Documents</a> content?"
  },
  {
    title: "Videos",
    content: "Videos content."
  },
  {
    title: "Documents",
    content: "Documents content. Wanna see some <a data-show=\"1\">Music</a> content?"
  },
];

var vue = new Vue({
  el: "#app",
  data: {
    show: 0,
    tabs
  },
  methods: {
    navigate(event) {
      const target = event.target;

      if (target.dataset.show) {
        event.preventDefault();
        this.show = target.dataset.show;
      }
    }     
  }
});

.section {
  padding: 2em 0;
}

.fade-up-enter-active,
.fade-up-leave-active {
  transition: all 0.3s ease-in-out;
}

.fade-up-enter,
.fade-up-leave-to {
  height: 0;
  transform: translateY(30px);
  opacity: 0;
}

关于html渲染的Vue.js指令

1 个答案: