Vue.js 如何从vue cli方法返回更新的变量值
我编写了使用vue cli方法递增和递减值的代码,但这些方法不返回任何内容。但是默认值打印在html上,我怎样才能得到方法值呢Vue.js 如何从vue cli方法返回更新的变量值,vue.js,vue-cli,Vue.js,Vue Cli,我编写了使用vue cli方法递增和递减值的代码,但这些方法不返回任何内容。但是默认值打印在html上,我怎样才能得到方法值呢 ---------- //html <div class="col-sm-4"> <div class="counter"> <center>Adults</center> <div class="row">
----------
//html
<div class="col-sm-4">
<div class="counter">
<center>Adults</center>
<div class="row">
<div class="col-sm-1">
<span class="fas fa-minus" v-on:click="adec"></span>
</div>
<div class="col-sm-10">
<center>{{adult}}</center>
</div>
<div class="col-sm-1">
<span class="fas fa-plus" v-on:click="ainc"></span>
</div>
</div>
</div>
</div>
----------
vue.js code
<script>
export default {
data () {
return {
msg: 'Welcome to Your Vue.js App',
adult:1,
}
},
methods:{
ainc(){
this.adult++;
},
adec(){
this.adult--;
},
}
}
</script>
----------
//html
成人
{{成人}}
----------
vue.js代码
导出默认值{
数据(){
返回{
msg:“欢迎使用您的Vue.js应用程序”,
成人:1,,
}
},
方法:{
ainc(){
这个.成人++;
},
adec(){
这是一个成年人;
},
}
}
我不确定这是否有帮助,但请告诉我是否有帮助:
<template>
<div class="pt-5">
<div class="row">
<div class="col-sm-4">
<button v-on:click="adec">minus</button> adult: {{adult}} | adec(): {{ainc()}}
</div>
<div class="col-sm-4">
<button v-on:click="ainc">plus</button> adult: {{adult}} | ainc(): {{adec()}}
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
msg: 'Welcome to Your Vue.js App',
adult: 1,
};
},
methods: {
ainc() {
this.adult += 1;
return this.adult;
},
adec() {
this.adult -= 1;
return this.adult;
},
},
};
</script>
减去成人:{{成人}}adec():{{ainc()}
加成人:{{成人}}ainc():{{adec()}
导出默认值{
数据(){
返回{
msg:“欢迎使用您的Vue.js应用程序”,
成人:1,,
};
},
方法:{
ainc(){
这是成人+=1;
归还这个。成人;
},
adec(){
这个。成人-=1;
归还这个。成人;
},
},
};
不太清楚您是否需要在这里。如前所述,maintal
应在DOM中呈现当前值,并将其递增和递减。你还想要什么?但实际上这个值不是递增或递减的,递增和递减的方法不起作用。以下是您的代码(已删除引导/字体)。亲爱的伯特现在我犯了一个错误,实际上我没有使用按钮,而是使用了字体很棒的图标+和-以及span标记,因此v-on:click逻辑没有执行,谢谢你,伙计,因为你的代码,我被认为尝试过一次使用有效的按钮