Vuejs中列表对象中文本的样式部分答案

【问题标题】：style part of the text within a list object in VuejsVuejs中列表对象中文本的样式部分
【发布时间】：2019-11-02 14:39:01
【问题描述】：

我尝试了多种方式来使用 vuejs 中的计算、监视和方法属性来设置部分数据对象的样式。我仍然不知道我该怎么做才能在“它很健康！”中加上“健康”这个词。串成不同的风格。

<template>
   <div='container'>
      <div v-for="item in food">
        {{ item }}
      </div>
   </div>
</template>
<script>
  export default{
   data(){
     return{
        food: [
           { name: 'fish', message: 'It is great!'},
           { name: 'carrot', message: 'It is healthy!'},
        ],
      }
   }
}
</script>

【问题讨论】：

标签： javascript vue.js listobject

【解决方案1】：

这是一个使用方法拆分每条消息并确定是否应突出显示的工作示例：

<template>
  <div class="container">
    <div v-for="(value, name) in food" :key="name">
      <span v-for="(word, index) in words(value)" :key="index">
        <span v-if="isHealthy(word)" class="healthy">{{ word }} </span>
        <span v-else>{{ word }} </span>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      food: { fish: 'It is great!', carrot: 'It is healthy!' },
    };
  },
  methods: {
    words(string) {
      return string.split(/\s+/);
    },
    isHealthy(string) {
      return /healthy/i.test(string);
    },
  },
};
</script>

<style scoped>
.healthy {
  color: red;
}
</style>

上面演示了一个简单的方法来完成这个 - 你可能会发现它失败的极端情况。你可以想象一个更复杂的words 版本，它提取包含和不包含单词“healthy”的子字符串列表。这会产生更浅的 HTML 结构。

【讨论】：

嘿，大卫，我试试你的例子，效果很好。但我的意思是把“健康”这个词改成不同的风格，而不是整个句子。
知道了。我已经更新了答案。试试新版本，然后告诉我。

【解决方案2】：

我创建了 CodePen 示例：

Codepen

HTML：

<div id="app">
  <div>
    <div v-for="(value, name) in food" v-key="name">
      {{ name }}: <span v-html="isHealthy(value)"></span>
    </div>
  </div>
</div>

CSS：

.healthy {
  color: green;
  font-weight: 700;
}

JS：

new Vue({
  el: "#app",
  data: () => ({
    food: { fish: 'It is great!', carrot: 'It is healthy!' }
  }),
  methods: {
    isHealthy(str) {
      if(str.includes("healthy")) {
        return str.replace("healthy", "<span class='healthy'>healthy</span>");
      }
      return str;
    }
  }
});

【讨论】：

【解决方案3】：

本质上，您需要在“健康”一词上添加某种标识类。这需要修改原始的food 数据。您可以使用computed 生成新的highlightedFood 数据，将“健康”替换为<span class="highlight">healthy</span>。您可以在样式标签中简单地设置您想要的样式。

<template>
  <div id="app">
    <div v-for="(item, index) in highlightedFood" :key="index">
      <div v-html="item"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      food: [
        { name: "fish", message: "It is great!" },
        { name: "carrot", message: "It is healthy!" }
      ]
    };
  },
  computed: {
    highlightedFood() {
      return this.food.map(item => {
        return {
          name: item.name,
          message: item.message.replace(
            "healthy",
            "<span class='highlight'>healthy</span>"
          )
        };
      });
    }
  }
};
</script>

<style>
.highlight {
  color: green;
}
</style>

注意，如果您使用作用域 CSS，则必须使用深度组合器：

<style scoped>
#app >>> .highlight {
  color: green;
}
</style>

关于深度选择器的更多信息：https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

【讨论】：