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为可以通过三目运算去控制样式。