我似乎无法弄清楚如何让组件工作。没有组件它工作正常(注释代码)。
这是我的 HTML:
<strong>Total Price:</strong> <span v-text="total"></span><br>
<strong>CPC:</strong> <span v-text="cpc"></span>
这是我的 Vue.js 代码:
Vue.component('my-component', {
// data: function() {
// return { interval: 0, exposure: 0, clicks: 0, total: 0, cpc: 0 }
// },
computed: {
total: function () {
return(this.clicks * (this.exposure * 0.001 / 10) / 700).toFixed(8)
},
cpc: function () {
return((this.total) / (this.clicks > 0 ? this.clicks : 1)).toFixed(8)
}
}
});
const app = new Vue({
el: '#app',
data: {
interval: 0, exposure: 0, clicks: 0, total: 0, cpc: 0
},
// computed: {
// total: function () {
// return(this.clicks * (this.exposure * 0.001 / 10) / 700).toFixed(8)
// },
// cpc: function () {
// return((this.total) / (this.clicks > 0 ? this.clicks : 1)).toFixed(8)
// }
// }
});
1) 除非我取消注释注释代码,否则这不起作用。
2) JSFiddle: http://jsfiddle.net/tjkbf71h/3/
最佳答案
您需要在 HTML 标记中包含该组件:
<div id="app">
<my-component></my-component>
</div>
然后您希望作为此组件的一部分显示的 HTML 需要位于模板中,内联或其他方式:
Vue.component('my-component', {
template: '<div>Your HTML here</div>',
data: function() {
return { interval: 0, exposure: 0, clicks: 0, total: 0, cpc: 0 }
},
//
关于javascript - Vue.js 组件不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40789789/