uniapp003.2

@input

@input 的作用是在你的input文本框输入时,输入的值会同步到你定义的变量里面,向上面那个预览后面就是跟着的就是input输入值所存放的变量,就会同步上去

如图:

这个方法还可以简化

直接就是使用箭头函数把iptValue=event.detail.value

然后下面的方法就可以删除了

vue里面还提供了一种更简便的方法!

直接把@inpu删除掉了,然后把value改成v-model就可以直接进行绑定了

@confirm

按下回车就会触发的事件

下面我们做了一个小案列

通之前的学习我们可以把上面的页面变成下面的样子

在这其中使用了

v-bind也就是简化后变成:的组件,

@click点击事件,

@input把输入框的输入的值添加到script块的数组里面去并在template块遍历出来

@confirm绑定回车事件,把按钮绑定一个回车事件,按下回车也能提交输入框的值

v-for循环把数组的索引和值都遍历成出来

v-model把输入框输入值映射到指定的对象上,然后对这个对象进行使用,比如一些判断,赋值什么的

更新-------

计算总价:

通过checked属性的值来计算总数

然后通过computed就可以计算出来了

checkbox-group

checkbox-group和checkbox不一样,checkbox-group有一个@change属性,如图下

如果要使用这个属性的话要定个value,value一般用的是唯一的,也就是id,但是value只能是字符串类型,所以要给id转成字符,这样才不会报错

在checkbox-group使用这个这个方法可以得出你勾选了那些产品