Vue 中select option默认选中的处理方法
在做泰康项目的时候有个需求就是要给select默认选中的样式我的处理方法有两个
1.直接将默认值给 selectedOption
<select v-model="selectedOption">
<option v-for="option in options" :value="option">{{option.city}}</option>
</select>
js
data ()
{
return {
selectedOption:{cityCode:0,city:"北京"},
selectedOption:{},
options:[
{
cityCode:0,
city:"北京"
},{
cityCode:1,
city:"上海"
},{
cityCode:2,
city:"天津"
},{
cityCode:3,
city:"重庆"
}
]
}
}
2.在created生命期函数上给selectedOption赋值给当前需要默认的值
created (){
this.selectedOption = this.options[1]
}
Vue 中select option默认选中的处理方法的更多相关文章
- vue中select设置默认选中
vue中select设置默认选中 一.总结 一句话总结: 通过v-model来:select上v-model的值为option默认选中的那项的值(value) 二.select设置默认选中实例 < ...
- struts2设置<s:select>默认选中项的方法
struts2的select标签中,常用的有以下几个属性:(1)struts2中的select 标签中,必须设置的属性只有一个,即是list.(2)select标签的list中必须有值,不然会报错.如 ...
- select()事件默认选中文本框的全部内容,并改变其背景色和文字颜色
1.select()事件默认选中文本框的全部内容 拿到input标签的节点,调用select()方法即可.但是我做的vue项目中调用了此方法有一个bug,单次点击会全选内容,双次点击的时候全选会闪一下 ...
- Vue Echarts 饼图设置默认选中一个
Vue Echarts 饼图设置默认选中一个 myChart.setOption(data) // data伟echarts所需要传入的参数,就是配置参数最多的那个玩意 myChart.dispatc ...
- 浅谈Vue中计算属性(computed)和方法(methods)的差别
浅谈Vue中计算属性(computed)和方法(methods)的差别 源码地址 methods方法和computed计算属性,两种方式的最终结果确实是完全相同 计算属性是基于它们的响应式依赖进行缓存 ...
- vue中select的使用以及select设置默认选中
简介 今天写pc端引入vue,遇到了一个问题,就是我循环出select内的数据以后,发现原本默认显示第一条的select框变成了空白,要选择后才有显示,结果查了好多文档,讲的都不是很清楚,后来看到一句 ...
- js中的new Option默认选中
new Option("文本","值",true,true).后面两个true分别表示默认被选中和有效! //js默认选中 var sel = document ...
- ionic中ng-options与默认选中第一项的问题
1. select中动态添加数据时发现一个选项为空,在选中了其他选项时,在点击时发现第一个空选项消失了,所有我们需要设置一个默认的选项: 2. 开始的时候我用的方法: <select class ...
- 用jQuery的attr()设置option默认选中无效的解决 attr设置属性失效
表单下拉选项使用selected设置,发现第一次默认选中成功,在页面不刷新的情况下,再次下拉,selected属性设置了,默认选中不生效 在手机端有些浏览器用jQuery的attr()方法设置sele ...
随机推荐
- 用户禁止cookie后,如何继续使用session
(1)如果用户禁止cookie,服务器仍会将sessionId以cookie的方式发送给浏览器,但是,浏览器不再保存这个cookie(即sessionId)了. (2)如果想继续使用session,需 ...
- Nginx80端口转发+域名——实现IP+端口隐藏
一.目的1.相信大家会遇到这样的问题:当一台服务器部署多个tomcat应用时,当我们访问tomcat时,需要在浏览器中输入服务器IP+端口号,这看起来非常的low. 二. 环境 1台服务服务器 假如I ...
- JDK 8 中Lambda表达式的使用
认识Lambda表达式 首先来引入一个示例 new Thread(new Runnable() { @Override public void run() { Syst ...
- (二)apache atlas配置和运行
上一篇文章,我们已经构建出了altas的安装包,所以我们继续使用安装包配置和运行atlas 首先解压atlas压缩包,授予bin目录下的执行权限 1.默认启动atlas cd atlas/bin/ p ...
- 【python】python与正则 re的主要用到的方法列举
[直接上代码] #coding=utf-8#1.先将正则表达式的字符串形式编译为Pattern实例 #2.使用Pattern实例处理文本并获得匹配结果 #3.最后使用Match实例获得消息,进行其他操 ...
- anchor values list
- 7.adb安装
adb的全称为Android Debug Bridge,中文名“调试桥”顾名思义adb命令是调试手机中应用的一种方法,而且作为Android SDK中的工具,其功能非常强大,用这个命令行工具可以直接操 ...
- records.config中文详解
转载:http://www.safecdn.cn/cdn/2018/12/records-config-zh/106.html records.config参数的一些备注 CONFIG proxy.c ...
- Maven父工程
1.创建Maven工程时 Packaging 选项为 pom 2.父工程目录结构只有pom.xml(父工程不进行编码) 3.需要的依赖信息在父工程中定义,子模块继承 5.将各个子模块聚合到一起 6.将 ...
- Flex+BlazeDS+java通信详细笔记2-推送
前台是Air,后台是java 在运行之前,先要在IE地址栏输入http://127.0.0.1:8080/PushDemo/TickCacheServlet?cmd=start 激活它. 地址:htt ...