v-for指令与v-model指令对表单数据的值变化

v-for 系统循环指令

语法格式:
<元素 v-for="(值,键) in 要循环的数据" :key="唯一标识"></元素>
	//如果不需要键,语法格式可以写为
<元素 v-for="值 in 要循环的数据"></元素>

//如果没有设置key,那么默认标识数据唯一标识的就是数组的键
//(但是会发生,当给数组插入数据时,当被选中的内容与插入数据下标相同,被选中内容会被更换)

关于v-model指令对表单数据的值变化

1.普通输入
	<input type='txet' v-model='键'/>
    输入的数据就是value值
2.单选按钮
	<input type="radio" value="xxx" v-model="键"/> 
     用户不能直接输入,只能选择,value中的值就是选中的值
3.多选按钮
	1) 不需要value值,只需要选中状态
		<input type="checkbox" v-model="键"/>
          键:布尔类型
          如果选中就是true 如果没有选中就是false
    2) 需要value值的
        <input type="checkbox" value="xx1" v-model="xxxx">
        <input type="checkbox" value="xx1" v-model="xxxx">
        <input type="checkbox" value="xx1" v-model="xxxx">
        <input type="checkbox" value="xx1" v-model="xxxx">
          选择的内容,直接影响数据的变化,也就是value值
4.下拉列表
	<select v-model="xx">
          <option value="xxx"></option>
          <option value="xxx"></option>
          <option value="xxx"></option>
	</select>
	同样是value影响最后的值

关于购物车的制作

详见: vue初级->day03
posted @ 2022-08-03 17:14  又又儿  阅读(284)  评论(0)    收藏  举报