首先.我们先导入vue插件:
然后建立一个
-
+
然后我们在
var vm = new Vue({
el:"#app",
data:{
num:1
}
})
然后我们在{{num}}这样,运行就会显示出
的效果图了. {{定义的值}} === v-text="定义的值",简单的说 两个大括号{{}}就是v-text指令的简写;
现在效果已经显示出来了.但是"-" 和"+"两个按钮并没什么用,我们写两个方法在
var vm = new Vue({
el:"#app",
data:{
num:1
},
methods:{
jian :function () {
if(this.num>0){
this.num--;
}else{
alert('最小了')
}
},
jia :function(){
if(this.num<10){
this.num++;
}else{
alert('最大了')
}
}
}
})
上图中标红的字体就是我们新加的方法,方法名,我就用拼音来写了.在方法中写逻辑,最小值为0.最大值为10
写完方法之后,要去调用,
-
{{num}}
+
如上图所示我们给这两个按钮加上对应的方法. @click= v-on:click;
到这里就写好了,额.仅为自己留念.如偶然看到,请谅解,勿喷
扫一扫
2231
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
