十八、v-model值的绑定
2021/9/7 6:07:39
本文主要是介绍十八、v-model值的绑定,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
对于单选按钮,复选框及选择框的选项,v-model绑定的值通常是静态字符串(value值)。
但是有时我们可能想把值绑定到vue实例的一个动态属性上,
这时可以用v-bind实现,并且这个属性的值可以不是字符串,可以是对象或者数组。
(1)绑定复选框
<input type='checkbox' v-model='checked' true-value="yes" false-value="no">{{checked}}
(2)绑定选择框的选项
<select v-model='selected'> <option disable value="">请选择</option> <option :value="{title:'羊肉串'}">羊肉串</option> <select> 结果:{{selected.title}}
注意:绑定的时候,使用了内联对象字面量。
<template v-if='false'><!--(1)绑定复选框--> <input type="checkbox" v-model='toggle' true-value="yes" false-value="no">{{toggle}}<br> <input type="checkbox" v-model='checked' true-value="1" false-value="2">{{checked}}<br> </template> <script> let data={ toggle:'no',//(1)绑定复选框 checked:'1', } </script>
<template v-if='false'><!--(2)绑定选择框(单选)的选项--> <select v-model='selected'> <option disable value="">请选择</option> <option v-for="(item,index) in items" :key="index" :value="item">{{item.title}}</option> </select> <span>选择的是:{{selected.title}},价格:{{selected.price}}</span> </template> <script> let data={ selected:'',//(2)绑定选择框的选项 items:[ {title:'羊肉串',price:2}, {title:'猪肉串',price:3}, {title:'牛肉串',price:4}, ], } </script>
<template><!--(2)绑定选择框(多选)的选项--> <select v-model='selectedArr' multiple> <option v-for="(item,index) in items" :value='item'>{{item.title}}</option> </select> <span>选择的是:{{selectedArr.length>0?selectedArr.join(","):""}}</span><br><!--输出=>选择的是:[object Object],[object Object]--> <span>选择的是:{{selectedArr.length>0?selectedArr:""}}</span><br><!--输出=>选择的是:[ { "title": "猪肉串", "price": 3 }, { "title": "牛肉串", "price": 4 } ]--> </template> <script> let data={ items:[ {title:'羊肉串',price:2}, {title:'猪肉串',price:3}, {title:'牛肉串',price:4}, ], selectedArr:[] } </script>
这篇关于十八、v-model值的绑定的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-07-08如何在敏捷项目中实现高效测试?
- 2024-07-08用户故事一定要有 “So that...” 吗?
- 2024-07-04TiDB 资源管控的对撞测试以及最佳实践架构
- 2024-07-03万字长文聊聊Web3的组成架构
- 2024-07-02springboot项目无法注册到nacos-icode9专业技术文章分享
- 2024-06-26结对编程到底难不难?答案在这里
- 2024-06-19《2023版Java工程师》课程升级公告
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt