主页 / 问题 / 1104069
Accepted
slobodianiukvitali
Asked:2020-04-02 00:58:43 +0000 UTC2020-04-02 00:58:43 +0000 UTC

解决模板中括号的问题？

  • 772

我创建了一个单独的组件。div标签的问题在于有括号的地方，这是组件不喜欢的地方，即模板。即问题出在模板中：

Vue.component('data-tag', {
		data() {
			return {
				dataend: '',
				days: ''
			}
		},
		template: `
		<div>
			<input type="date" placeholder="дата окончания" v-model="dataend">
			<div> {{days}} days</div>
			<div :class="`tab ${сolorTag}`"></div>
		</div>
		`,
		watch: {
			dataend(){
				this.deadline();
			}
		},
		methods: {
			deadline() {
				const msPerDay = 8.64 * Math.pow(10, 7);
				const abs = Date.parse(this.dataend) - Date.now();
				this.days = Math.ceil(abs/msPerDay);
			}
		},
		computed: {
			сolorTag() {
		        switch(true) {
		            case this.days > 60: {
		              return 'blue'
		            }
		            case this.days < 60 && this.days>14: {
		              return 'yellow'
		            }
		            case this.days < 14: {
		              return 'red'
		            }
		        }
			}
		}
	});
	new Vue({
		el: "#data-tag"		
	})
.tab {
width: 140px;
height: 80px;
background-color: #eee;
}
.red {background-color: red;}
.yellow {background-color: yellow;}
.blue {background-color: blue;}
<div id="data-tag">
<data-tag></data-tag>
</div>

vue.js

1 个回答

  1. Best Answer

    根据 Vue 文档：

    template使用JavaScript 模板字符串使多行模板更具可读性。

    因此，在Template Strings的指导下，您可以轻松地将代码带到表单中：

        template: `
      <div>
        <input type="date" placeholder="дата окончания" v-model="dataend">
        <div> {{days}} days</div>
        <div class="tab" :class="сolorTag"></div>
      </div>
    `,


    Vue.component('data-tag', {
  data() {
    return {
      dataend: '',
      days: ''
    }
  },
  template: `
      <div>
        <input type="date" placeholder="дата окончания" v-model="dataend">
        <div> {{days}} days</div>
        <div class="tab" :class="сolorTag"></div>
      </div>
    `,
  watch: {
    dataend() {
      this.deadline();
    }
  },
  methods: {
    deadline() {
      const msPerDay = 8.64 * Math.pow(10, 7);
      const abs = Date.parse(this.dataend) - Date.now();
      this.days = Math.ceil(abs / msPerDay);
    }
  },
  computed: {
    сolorTag() {
      switch (true) {
        case this.days > 60:
          {
            return 'blue'
          }
        case this.days < 60 && this.days > 14:
          {
            return 'yellow'
          }
        case this.days < 14:
          {
            return 'red'
          }
      }
    }
  }
});
new Vue({
  el: "#data-tag"
})
    .tab {
  width: 140px;
  height: 80px;
  background-color: #eee;
}

.red {
  background-color: red;
}

.yellow {
  background-color: yellow;
}

.blue {
  background-color: blue;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="data-tag">
  <data-tag></data-tag>
</div>

    另请注意

    Internet Explorer (IE) 不支持此功能，因此如果您需要 IE 支持并且没有使用转译的选项（如使用 Babel 或 TypeScript），请改为对多行模板使用反斜杠表示法。

      template: '\
    <div>\
      <input type="date" placeholder="дата окончания" v-model="dataend">\
      <div> {{days}} days</div>\
      <div class="tab" :class="`tab ${сolorTag}`"></div>\
    </div>\
  ',


    Vue.component('data-tag', {
  data() {
    return {
      dataend: '',
      days: ''
    }
  },
  template: '<div>\
			<input type="date" placeholder="дата окончания" v-model="dataend">\
			<div> {{days}} days</div>\
			<div class="tab" :class="`tab ${сolorTag}`"></div>\
		</div>\
		',
  watch: {
    dataend() {
      this.deadline();
    }
  },
  methods: {
    deadline() {
      const msPerDay = 8.64 * Math.pow(10, 7);
      const abs = Date.parse(this.dataend) - Date.now();
      this.days = Math.ceil(abs / msPerDay);
    }
  },
  computed: {
    сolorTag() {
      switch (true) {
        case this.days > 60:
          {
            return 'blue'
          }
        case this.days < 60 && this.days > 14:
          {
            return 'yellow'
          }
        case this.days < 14:
          {
            return 'red'
          }
      }
    }
  }
});
new Vue({
  el: "#data-tag"
})
    .tab {
  width: 140px;
  height: 80px;
  background-color: #eee;
}

.red {
  background-color: red;
}

.yellow {
  background-color: yellow;
}

.blue {
  background-color: blue;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="data-tag">
  <data-tag></data-tag>
</div>

    • 1

相关问题