Vue 基础学习2

Vue 基础学习2

表单的输入绑定

input的数据绑定

这里input通过v-model绑定了value数据,这里通过disabled属性来判断当前input书否可用。

checkbox的选择和数据绑定

在checkbox选择框的使用时,value对应的是这个checkbox正确的值,而v-model显示的则是我们选择的内容。在v-model中存在我们value的值时,则表示被选中。

radioButton的选择和数据绑定

这里我们绑定的是radioP,原理和checkbox一样。

select的选择和数据绑定

select的数据绑定比较特殊,它的item的数据格式需要记住。原理和checkbox一样。

v-model的修饰符:

.lazy: 会转变为在输入框失焦或者按下回车后更新

.number: 过滤文字之后只留数字

.trim: 将空格全部干掉

v-bind 让img动态绑定图片

样式的设置:

在vue中,我们可以把样式的设定也放在vue对象中,我们在其中定义好对应的变量就好了。

1为设置class类,然后与.aa的class的效果相对应。 2为绑定多个class。3为我们可以通过设置true,false去显示不同的效果。4为我们可以直接把样式设置到vue的变量中,然后直接设置过去。5为可以通过三目运算去控制样式。

猜你喜欢

转载自blog.csdn.net/u011486491/article/details/80911033