Question

我只是想知道范围样式和v-html指令是否存在已知问题？我似乎发现，要么将相同的样式应用于父项，要么从样式中删除了范围关键的工作，一切似乎都可以正常工作...？

存在问题的示例组件（如果拥有Wordpress网站的任何人都想对其设置进行测试，则可以与wordpress API一起使用）：

<template>
  <div v-bind:id="posts">
    <div v-for="(post, i) in posts" v-bind:key="i">
      <div v-html="post.content.rendered"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Posts",
  props: {
    msg: String
  },
  data() {
    return {
      posts: null
    };
  },
  created() {
    this.$http.get(this.$store.state.endpoint + "posts").then(response => {
      this.posts = response.body;
    });
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
p {
  color: #42b983; // v-html in this example spits out numerous <p></p> tags...
}
</style>

*作为复制示例，您可以将this.$store.state.endpoint替换为您的Wordpress API端点，例如http://localhost:8000/wp-json/wp/v2或类似名称。

Answer 1

来自vue-loader docs：

动态生成的内容

使用v-html创建的DOM内容不受范围样式的影响，但是您仍然可以使用深度选择器设置样式。

因此，要设置动态内容的样式，应使用deep selectors，如以下示例所示：

<div class="posts">
  <div v-for="(post, i) in posts" v-bind:key="i">
    <div v-html="post.content.rendered"></div>
  </div>
</div>

...

<style scoped>
.posts >>> p {
  color: blue;
}
</style>

demo

Vue.js：范围样式和v-html指令的已知问题？

1 个答案:

动态生成的内容