如何将此组件集成到我的 vue.js 中?
How can I integrate this component in my vue.js?
我正在尝试将此组件添加到我的应用程序中,但作为 vue 组件
但由于某种原因,页面未加载。
组件来源:https://codepen.io/jessicachou/details/bjaZmY
我收到以下警告:
- 未解析的函数或方法 isNumeric()(第 35 行)
- 未使用的参数 e(第 32 行)
-参数类型字符串不可分配给参数类型对象|未定义类型字符串不可分配给类型对象 (32)
<template>
<div class="content center">
<h2>How old is your dog in human years?</h2>
<div class="input-container">
<input class="num-age center" id="input" placeholder="5">
</div>
<div class="calc-results">
<div class="num-result center">
<h2 class="num-totals total-small-dog" data-default="total-small-dog">40</h2>
<img class="image-dog" src="..." alt=".."/>
<h3 class="description-small-dog">Small dog</h3>
</div>
<div class="num-result center">
<h2 class="num-totals total-medium-dog" data-default="45">45</h2>
<img class="image-dog" src="..." alt="..."/>
<h3 class="description-medium-dog">Medium dog</h3>
</div>
<div class="num-result center">
<h2 class="num-totals total-big-dog" data-default="49">49</h2>
<img class="image-dog" src="..." alt=".."/>
<h3 class="description-big-dog">Big dog</h3>
</div>
</div>
<p class="disclaimer">*No dogs were harmed in the creation of this calculator.</p>
</div>
</template>
<script>
export default {
name: 'DogAgeCalculater'
}
```line(32)```$('.num-age').keyup(function (e) {
var num, smallAge, mediumAge, bigAge
num = $(this).val()
```line(35)``` if (!$.isNumeric(num)) {
return
}
smallAge = (num * 4) + 20
mediumAge = (num * 6) + 15
bigAge = (num * 9) + 4
$('total-small-dog').html(smallAge)
$('total-medium-dog').html(mediumAge)
$('total-big-dog').html(bigAge)
})
</script>
.content {
background-color: #caefec;
font-family: Arial,sans-serif;
padding: 20px;
max-width: 800px;
margin: auto;
}
.center {
text-align: center;
}
h2 {
color: #03363d;
font-size: 32px;
line-height: 1.2;
}
.num-age {
appearance: none;
-webkit-appearance: none;
border-radius: 12px;
background-color: #fafafa;
box-shadow: 0 14px 14px 0 rgba(23,23,23,0.07);
border: solid 2px #f3f3f3;
color: #03363d;
font: 28px/1.16 Arial,sans-serif;
outline: 0;
margin: 10px 0;
max-width: 200px;
padding: 10px;
}
.num-result {
display: inline-block;
width: 32%;
vertical-align: top;
}
.disclaimer {
color: #03363d;
font-size: 14px;
}
.image-dog {
max-width: 100%;
max-height: 100px;
}
一种方法就像下面的代码片段:
new Vue({
el: '#demo',
data() {
return {
years: {
small: 40,
medium: 45,
big: 49
},
year: 5
}
},
methods: {
calcYears() {
this.years.small = (this.year * 4) + 20
this.years.medium = (this.year * 6) + 15
this.years.big = (this.year * 9) + 4
}
}
})
.content {
background-color: #caefec;
font-family: Arial,sans-serif;
padding: 20px;
max-width: 800px;
margin: auto;
}
.center {
text-align: center;
}
h2 {
color: #03363d;
font-size: 32px;
line-height: 1.2;
}
.num-age {
appearance: none;
-webkit-appearance: none;
border-radius: 12px;
background-color: #fafafa;
box-shadow: 0 14px 14px 0 rgba(23,23,23,0.07);
border: solid 2px #f3f3f3;
color: #03363d;
font: 28px/1.16 Arial,sans-serif;
outline: 0;
margin: 10px 0;
max-width: 200px;
padding: 10px;
}
.num-result {
display: inline-block;
width: 32%;
vertical-align: top;
}
.disclaimer {
color: #03363d;
font-size: 14px;
}
.image-dog {
max-width: 100%;
max-height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<div class="content center">
<h2>How old is your dog in human years?</h2>
<div class="input-container">
<input type="number"class="num-age center" id="input" placeholder="5" v-model="year" @keyup="calcYears" @change="calcYears">
</div>
<div class="calc-results">
<div class="num-result center">
<h2 class="num-totals total-small-dog" data-default="total-small-dog">{{ years.small }}</h2>
<img class="image-dog" src="..." alt=".."/>
<h3 class="description-small-dog">Small dog</h3>
</div>
<div class="num-result center">
<h2 class="num-totals total-medium-dog" data-default="45" >{{ years.medium }}</h2>
<img class="image-dog" src="..." alt="..."/>
<h3 class="description-medium-dog">Medium dog</h3>
</div>
<div class="num-result center">
<h2 class="num-totals total-big-dog" data-default="49">{{ years.big }}</h2>
<img class="image-dog" src="..." alt=".."/>
<h3 class="description-big-dog">Big dog</h3>
</div>
</div>
<p class="disclaimer">*No dogs were harmed in the creation of this calculator.</p>
</div>
</div>
使用纯 JS:
<style>
.content {
background-color: #caefec;
font-family: Arial,sans-serif;
padding: 20px;
max-width: 800px;
margin: auto;
}
.center {
text-align: center;
}
h2 {
color: #03363d;
font-size: 32px;
line-height: 1.2;
}
.num-age {
appearance: none;
-webkit-appearance: none;
border-radius: 12px;
background-color: #fafafa;
box-shadow: 0 14px 14px 0 rgba(23,23,23,0.07);
border: solid 2px #f3f3f3;
color: #03363d;
font: 28px/1.16 Arial,sans-serif;
outline: 0;
margin: 10px 0;
max-width: 200px;
padding: 10px;
}
.num-result {
display: inline-block;
width: 32%;
vertical-align: top;
}
.disclaimer {
color: #03363d;
font-size: 14px;
}
.image-dog {
max-width: 100%;
max-height: 100px;
}
</style>
<div class="content center">
<h2>How old is your dog in human years?</h2>
<div class="input-container">
<input class="num-age center" id="input" placeholder="5">
</div>
<div class="calc-results">
<div class="num-result center">
<h2 class="num-totals total-small-dog" data-default="total-small-dog">40</h2>
<img class="image-dog" src="..." alt=".."/>
<h3 class="description-small-dog">Small dog</h3>
</div>
<div class="num-result center">
<h2 class="num-totals total-medium-dog" data-default="45">45</h2>
<img class="image-dog" src="..." alt="..."/>
<h3 class="description-medium-dog">Medium dog</h3>
</div>
<div class="num-result center">
<h2 class="num-totals total-big-dog" data-default="49">49</h2>
<img class="image-dog" src="..." alt=".."/>
<h3 class="description-big-dog">Big dog</h3>
</div>
</div>
<p class="disclaimer">*No dogs were harmed in the creation of this calculator.</p>
</div>
<script>
document.querySelector("#input").addEventListener('keyup', (event) => {
let num, smallAge, mediumAge, bigAge
num = event.target.value
if (!isNaN(num)) {
smallAge = (num * 4) + 20
mediumAge = (num * 6) + 15
bigAge = (num * 9) + 4
document.querySelector(".total-small-dog").innerText = smallAge
document.querySelector(".total-medium-dog").innerText = mediumAge
document.querySelector(".total-big-dog").innerText = bigAge
}
})
</script>
我正在尝试将此组件添加到我的应用程序中,但作为 vue 组件 但由于某种原因,页面未加载。 组件来源:https://codepen.io/jessicachou/details/bjaZmY
我收到以下警告:
- 未解析的函数或方法 isNumeric()(第 35 行)
- 未使用的参数 e(第 32 行)
-参数类型字符串不可分配给参数类型对象|未定义类型字符串不可分配给类型对象 (32)
<template>
<div class="content center">
<h2>How old is your dog in human years?</h2>
<div class="input-container">
<input class="num-age center" id="input" placeholder="5">
</div>
<div class="calc-results">
<div class="num-result center">
<h2 class="num-totals total-small-dog" data-default="total-small-dog">40</h2>
<img class="image-dog" src="..." alt=".."/>
<h3 class="description-small-dog">Small dog</h3>
</div>
<div class="num-result center">
<h2 class="num-totals total-medium-dog" data-default="45">45</h2>
<img class="image-dog" src="..." alt="..."/>
<h3 class="description-medium-dog">Medium dog</h3>
</div>
<div class="num-result center">
<h2 class="num-totals total-big-dog" data-default="49">49</h2>
<img class="image-dog" src="..." alt=".."/>
<h3 class="description-big-dog">Big dog</h3>
</div>
</div>
<p class="disclaimer">*No dogs were harmed in the creation of this calculator.</p>
</div>
</template>
<script>
export default {
name: 'DogAgeCalculater'
}
```line(32)```$('.num-age').keyup(function (e) {
var num, smallAge, mediumAge, bigAge
num = $(this).val()
```line(35)``` if (!$.isNumeric(num)) {
return
}
smallAge = (num * 4) + 20
mediumAge = (num * 6) + 15
bigAge = (num * 9) + 4
$('total-small-dog').html(smallAge)
$('total-medium-dog').html(mediumAge)
$('total-big-dog').html(bigAge)
})
</script>
.content {
background-color: #caefec;
font-family: Arial,sans-serif;
padding: 20px;
max-width: 800px;
margin: auto;
}
.center {
text-align: center;
}
h2 {
color: #03363d;
font-size: 32px;
line-height: 1.2;
}
.num-age {
appearance: none;
-webkit-appearance: none;
border-radius: 12px;
background-color: #fafafa;
box-shadow: 0 14px 14px 0 rgba(23,23,23,0.07);
border: solid 2px #f3f3f3;
color: #03363d;
font: 28px/1.16 Arial,sans-serif;
outline: 0;
margin: 10px 0;
max-width: 200px;
padding: 10px;
}
.num-result {
display: inline-block;
width: 32%;
vertical-align: top;
}
.disclaimer {
color: #03363d;
font-size: 14px;
}
.image-dog {
max-width: 100%;
max-height: 100px;
}
一种方法就像下面的代码片段:
new Vue({
el: '#demo',
data() {
return {
years: {
small: 40,
medium: 45,
big: 49
},
year: 5
}
},
methods: {
calcYears() {
this.years.small = (this.year * 4) + 20
this.years.medium = (this.year * 6) + 15
this.years.big = (this.year * 9) + 4
}
}
})
.content {
background-color: #caefec;
font-family: Arial,sans-serif;
padding: 20px;
max-width: 800px;
margin: auto;
}
.center {
text-align: center;
}
h2 {
color: #03363d;
font-size: 32px;
line-height: 1.2;
}
.num-age {
appearance: none;
-webkit-appearance: none;
border-radius: 12px;
background-color: #fafafa;
box-shadow: 0 14px 14px 0 rgba(23,23,23,0.07);
border: solid 2px #f3f3f3;
color: #03363d;
font: 28px/1.16 Arial,sans-serif;
outline: 0;
margin: 10px 0;
max-width: 200px;
padding: 10px;
}
.num-result {
display: inline-block;
width: 32%;
vertical-align: top;
}
.disclaimer {
color: #03363d;
font-size: 14px;
}
.image-dog {
max-width: 100%;
max-height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<div class="content center">
<h2>How old is your dog in human years?</h2>
<div class="input-container">
<input type="number"class="num-age center" id="input" placeholder="5" v-model="year" @keyup="calcYears" @change="calcYears">
</div>
<div class="calc-results">
<div class="num-result center">
<h2 class="num-totals total-small-dog" data-default="total-small-dog">{{ years.small }}</h2>
<img class="image-dog" src="..." alt=".."/>
<h3 class="description-small-dog">Small dog</h3>
</div>
<div class="num-result center">
<h2 class="num-totals total-medium-dog" data-default="45" >{{ years.medium }}</h2>
<img class="image-dog" src="..." alt="..."/>
<h3 class="description-medium-dog">Medium dog</h3>
</div>
<div class="num-result center">
<h2 class="num-totals total-big-dog" data-default="49">{{ years.big }}</h2>
<img class="image-dog" src="..." alt=".."/>
<h3 class="description-big-dog">Big dog</h3>
</div>
</div>
<p class="disclaimer">*No dogs were harmed in the creation of this calculator.</p>
</div>
</div>
使用纯 JS:
<style>
.content {
background-color: #caefec;
font-family: Arial,sans-serif;
padding: 20px;
max-width: 800px;
margin: auto;
}
.center {
text-align: center;
}
h2 {
color: #03363d;
font-size: 32px;
line-height: 1.2;
}
.num-age {
appearance: none;
-webkit-appearance: none;
border-radius: 12px;
background-color: #fafafa;
box-shadow: 0 14px 14px 0 rgba(23,23,23,0.07);
border: solid 2px #f3f3f3;
color: #03363d;
font: 28px/1.16 Arial,sans-serif;
outline: 0;
margin: 10px 0;
max-width: 200px;
padding: 10px;
}
.num-result {
display: inline-block;
width: 32%;
vertical-align: top;
}
.disclaimer {
color: #03363d;
font-size: 14px;
}
.image-dog {
max-width: 100%;
max-height: 100px;
}
</style>
<div class="content center">
<h2>How old is your dog in human years?</h2>
<div class="input-container">
<input class="num-age center" id="input" placeholder="5">
</div>
<div class="calc-results">
<div class="num-result center">
<h2 class="num-totals total-small-dog" data-default="total-small-dog">40</h2>
<img class="image-dog" src="..." alt=".."/>
<h3 class="description-small-dog">Small dog</h3>
</div>
<div class="num-result center">
<h2 class="num-totals total-medium-dog" data-default="45">45</h2>
<img class="image-dog" src="..." alt="..."/>
<h3 class="description-medium-dog">Medium dog</h3>
</div>
<div class="num-result center">
<h2 class="num-totals total-big-dog" data-default="49">49</h2>
<img class="image-dog" src="..." alt=".."/>
<h3 class="description-big-dog">Big dog</h3>
</div>
</div>
<p class="disclaimer">*No dogs were harmed in the creation of this calculator.</p>
</div>
<script>
document.querySelector("#input").addEventListener('keyup', (event) => {
let num, smallAge, mediumAge, bigAge
num = event.target.value
if (!isNaN(num)) {
smallAge = (num * 4) + 20
mediumAge = (num * 6) + 15
bigAge = (num * 9) + 4
document.querySelector(".total-small-dog").innerText = smallAge
document.querySelector(".total-medium-dog").innerText = mediumAge
document.querySelector(".total-big-dog").innerText = bigAge
}
})
</script>