我使用带有codepen的Vue.js创建了一个定价计算器，并在此处重新创建。 它似乎工作正常，但当我将它添加到我的jekyll网站并在本地运行时，没有显示vue数据。我没有收到任何错误，并尝试使用vue dev工具，数据似乎在那里显示。我还尝试用
在本地包装js代码
$(document).ready(function() {
//code in here
});
有什么我公然缺席的吗？这是我第一次使用Vues.js.提前致谢
var vm = new Vue({
el: '#app',
data: {
// starting values
analysisDeployment: 0,
remoteOfficesPhysical: 0,
remoteOfficesVirtual: 0,
largeOffices: 0,
dataCenters: 0,
additionalApps: 0,
totalLocations: 0,
totalApps: 0
},
computed: {
totalMonth: function() {
var remoteOfficesPhysicalAmount = parseInt(this.remoteOfficesPhysical * 292);
var remoteOfficesVirtualAmount = parseInt(this.remoteOfficesVirtual * 292);
var largeOfficesAmount = parseInt(this.largeOffices * 742);
var dataCentersAmount = parseInt(this.dataCenters * 2150);
var additionalAppsAmount = parseInt(this.additionalApps * 29);
var totalApps = parseInt(additionalAppsAmount * this.totalLocations);
var totalByMonth = parseInt(remoteOfficesPhysicalAmount + remoteOfficesVirtualAmount + largeOfficesAmount + dataCentersAmount + totalApps);
return totalByMonth;
},
totalYear: function() {
var totalByYear = parseInt(this.totalMonth * 12);
return totalByYear;
},
totalLocations: function() {
var totalOfficePhyscial = parseInt(this.remoteOfficesPhysical);
var totalOfficeVirtual = parseInt(this.remoteOfficesVirtual);
var totalLargeOffice = parseInt(this.largeOffices);
var totalDataCenter = parseInt(this.dataCenters);
var grandTotalLocations = parseInt(totalOfficePhyscial + totalOfficeVirtual + totalLargeOffice + totalDataCenter);
return grandTotalLocations;
},
totalHardware: function() {
var remoteOfficesPhysicalAmount = parseInt(this.remoteOfficesPhysical * 299);
var remoteOfficesVirtualAmount = parseInt(this.remoteOfficesVirtual * 99);
var largeOfficesAmount = parseInt(this.largeOffices * 599);
var dataCentersAmount = parseInt(this.dataCenters * 2199);
var totalHardwarePoints = parseInt(remoteOfficesPhysicalAmount + remoteOfficesVirtualAmount + largeOfficesAmount + dataCentersAmount);
return totalHardwarePoints;
},
grandTotalCosts: function () {
var totalCostYear = parseInt(this.totalYear);
var totalDeployment = parseInt(this.analysisDeployment);
var grandTotal = parseInt(totalCostYear + totalDeployment);
return grandTotal;
}
}
});[type=range] {
-webkit-appearance: none;
margin: 15px 0;
width: 100%;
}
[type=range]:focus {
outline: none;
}
[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 5px;
cursor: pointer;
transition: all .2s ease;
box-shadow: 0px 0px 0px #333, 0 0 0px #404040;
background: #ccc;
border: 0px solid #333;
border-radius: 50px;
}
[type=range]::-webkit-slider-thumb {
box-shadow: 0px 0px 0px #111, 0 0 0px #1e1e1e;
border: 3px solid #2691a4;
height: 30px;
width: 30px;
border-radius: 50px;
background: #2ba3b9;
cursor: pointer;
-webkit-appearance: none;
margin-top: -12.5px;
}
[type=range]:focus::-webkit-slider-runnable-track {
background: #cccccc;
}
[type=range]::-moz-range-track {
width: 100%;
height: 5px;
cursor: pointer;
transition: all .2s ease;
box-shadow: 0px 0px 0px #333, 0 0 0px #404040;
background: #ccc;
border: 0px solid #333;
border-radius: 50px;
}
[type=range]::-moz-range-thumb {
box-shadow: 0px 0px 0px #111, 0 0 0px #1e1e1e;
border: 3px solid #2691a4;
height: 30px;
width: 30px;
border-radius: 50px;
background: #2ba3b9;
cursor: pointer;
}
[type=range]::-ms-track {
width: 100%;
height: 5px;
cursor: pointer;
transition: all .2s ease;
background: transparent;
border-color: transparent;
border-width: 15px 0;
color: transparent;
}
[type=range]::-ms-fill-lower {
box-shadow: 0px 0px 0px #333, 0 0 0px #404040;
background: #cccccc;
border: 0px solid #333;
border-radius: 100px;
}
[type=range]::-ms-fill-upper {
box-shadow: 0px 0px 0px #333, 0 0 0px #404040;
background: #ccc;
border: 0px solid #333;
border-radius: 100px;
}
[type=range]::-ms-thumb {
box-shadow: 0px 0px 0px #111, 0 0 0px #1e1e1e;
border: 3px solid #2691a4;
height: 30px;
width: 30px;
border-radius: 50px;
background: #2ba3b9;
cursor: pointer;
margin-top: 0;
}
[type=range]:focus::-ms-fill-lower {
background: #ccc;
}
[type=range]:focus::-ms-fill-upper {
background: #cccccc;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.7/vue.js"></script>
<div id="app" class="container">
Remote Offices (physical): <input type="range" min="0" step="1" max="100" v-model="remoteOfficesPhysical"> {{ remoteOfficesPhysical }}<br><br>
Remote Offices (virtual): <input type="range" min="0" step="1" max="100" v-model="remoteOfficesVirtual"> {{remoteOfficesVirtual}}<br><br>
Large Offices: <input type="range" min="0" step="1" max="100" v-model="largeOffices"> {{largeOffices}}<br><br>
Data Centers: <input type="range" min="0" step="1" max="100" v-model="dataCenters"> {{dataCenters}}<br><br>
Additional Apps: <input type="range" min="0" step="1" max="100" v-model="additionalApps"> {{additionalApps}}<br><br>
Analysis deployment:
<select name="analysis" v-model="analysisDeployment">
<option value="0">Public</option>
<option value="0">Shared / Public</option>
<option value="24000">Dedicated / Private</option>
<option value="39000">Virtual / Private</option>
<option value="41000">Private, virtual + hardware</option>
</select>
<span> + ${{ analysisDeployment }}</span>
<h3 class="ui header">Total locations: {{ totalLocations }}</h3>
<h3 class="ui header">Total monitoring service cost per month: ${{ totalMonth }}</h3>
<h3 class="ui header">Total monitoring service cost per year: ${{ totalYear }}</h3>
<h3 class="ui header">Monitoring points hardware costs (one-time cost): ${{ totalHardware}}</h3>
<h3 class="ui header">Grand Total: ${{ grandTotalCosts }}</h3>
</div>