Vue从零开始总结19

2021-04-18 18:15 作者:忘魂儿 0人读过 | 我要投稿

v-model的使用方法，它呢,效果上是双向绑定的，就是说你改它也改，它改你也改

这里我们用输入框进行演示

上代码：

<div id="app">
<input type="text" v-model="message">
<h2>{{message}}</h2>
</div>

data:{
message:'hello world',
movies:['海贼','火影'],
counter:0
}

如图：

如果不用v-model来实现的话，按照之前学的内容我们可以这么写

<div id="app">
<input type="text" :value="message" @input="message=$event.target.value">
<h2>{{message}}</h2>
</div>

或者在input事件里面再加一个函数

@input="change"

methods中change(event){

this.message=event.target.value;

}

再用单选框进行演示

没加v-model之前，我们只能通过设置同一个name实现互斥事件，checked实现默认选项

再添加model后，name和checked都不用写，但需要做的是双向绑定数据用于传递给服务器

<label for="man">
男
<input type="radio" id="man" value="男" v-model="sex">//value一定要写！！！
</label>
<label for="feman">
女
<input type="radio" id="feman" value="女" v-model="sex">
</label>
<h3>你的性别是:{{sex}}</h3>

data:{
message:'hello world',
movies:['海贼','火影'],
counter:0,
sex:'男'
}

效果如下：

再用复选框（单选框）进行演示

有的时候需要用户查看隐私协议，并询问他们是否同意，如果同意则进行下一步

那么，代码演示：

<p>是否同意协议？</p>
<label for="agree"> 同意协议</label>
<input type="checkbox" v-model="isAgree" id="agree">//v-model动态绑定isAgree，根据用户的选择来实时更改

<h2>你选择的是：{{isAgree}}</h2>
<button :disabled="!isAgree">下一步</button>//disabled使无效，为true的时候使无效，根据v-model传过来的isAgree值来判断是否允许下一步

data:{
isAgree:false
}

效果如下：

再用复选框（多选框）来进行演示,注意动态绑定的就是数组了，而且属于同一数组

<input type="checkbox" value="唱歌" v-model="hobbies">唱歌
<input type="checkbox" value="画画" v-model="hobbies">画画
<input type="checkbox" value="摄影" v-model="hobbies">摄影
<input type="checkbox" value="二次元" v-model="hobbies">二次元
<h2>你的爱好是：{{hobbies}}</h2>

data:{
isAgree:false,
hobbies:[]
}

效果如下：

如果用select标签来做的话

单选：

<select name="" v-model="hobby">
<option value="唱歌" >唱歌</option>
<option value="画画">画画</option>
<option value="摄影">摄影</option>
<option value="二次元">二次元</option>
</select>
<h2>你的爱好是：{{hobby}}</h2>

data:{
hobby:'画画'
}

效果如下：

多选

<select name="" v-model="hobbies" multiple>
<option value="唱歌" >唱歌</option>
<option value="画画">画画</option>
<option value="摄影">摄影</option>
<option value="二次元">二次元</option>
</select>
<h2>你的爱好是：{{hobbies}}</h2>

data:{
isAgree:false,
hobbies:[]
}

效果如下：

接下来升级一下，应用值绑定！

<label v-for="item in originalHobbies" :for="itemId">
<input type="checkbox" :value="item" :id="itemId" v-model="hobbies">{{item}}
</label>
<h2>你的爱好是：{{hobbies}}</h2>

data:{
hobbies:[],
originalHobbies:['唱歌','画画','摄影','二次元']
}

效果如下：