小编eag*_*845的帖子

如何用组件替换字符串(vue)

我有包含的字符串###,我正在用数组值替换。现在我想将它们与组件一起使用,我创建了该组件并且它可以工作,但我不知道如何在字符串中使用它。我不想手动包装它们,因为我不知道字符串将如何,它可以有多个###. 如果有 2 ###, options 将有 2 个子数组。

更好的方法是什么?

代码: https: //jsfiddle.net/tsobh4nu/

Vue.component('opt', {
  template: `<label>
                <span class="bold" v-for="(str,idx) in options">
                     {{str + " / "}}
                </span>
             </label>`,
  props:{options: Array}
})

new Vue({
  el: '#app',
  data: {
    str: "I have ### and you have a ###.",
      options: [
        ['AAA', 'BBB', 'CCC'],
        ['XXX', 'YYY', 'ZZZ']
      ]
  },
  computed:{
  	replacedStr(){
    	let newStr = this.str;
      this.options.forEach(option=>{
      	newStr = newStr.replace('###',this.concatenateOptions(option));
      })
      return newStr;
    }
  },
  methods: {
    concatenateOptions(strArr) { …
Run Code Online (Sandbox Code Playgroud)

javascript vue.js vue-component vuejs2

6
推荐指数
1
解决办法
2万
查看次数

标签 统计

javascript ×1

vue-component ×1

vue.js ×1

vuejs2 ×1