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 ...
随机推荐
- NoSQL学习1
MongoDB使用C++语言编写的一个基于分布式的文件存储的开源数据库.可以在承受高负载的情况下,保证服务器的性能. MongoDB将数据存储成为一个文档,数据结构有键值对组成.类似于JSON,字段值 ...
- vim more
启用鼠标 :set mouse=a 跳转到下一函数 下一个函数开头 ]] 当前函数末尾/下一个函数的末尾 ][ 当前函数开头/上一个函数的开头 [[ 选项可以按任何顺序生效,可以放在文件名前或后边 ...
- python 日期创建dir
- srbac配置
Yii框架中安装srbac扩展方法 以前自己安装过一次srbac,遇到很多问题,虽然都解决了,可是一时偷懒,没做记录. 再次安装时,还是遇到了点麻烦,所以这一还是记下来,以备不时之需. 首先,下载sr ...
- jdk src 学习 Threadlocal
示例: import java.io.Serializable; public class TestThreadLocal implements Serializable { /** * */ pri ...
- 转载 Servlet3 的 @WebServlet http://www.cnblogs.com/luxh/archive/2012/06/06/2537458.html
我使用的开发环境:MyEclipse10+Tomcat7+JDK6. 开发Servlet3的程序需要一定的环境支持.Servlet3是Java EE6规范的一部分,MyEclipse10和Tomcat ...
- tomcat jvm 内存调优 适用于 JDK 6 & 7
参考:https://blog.csdn.net/m0_37327416/article/details/76185051 1.jvm内存管理机制: 1)堆(Heap)和非堆(Non-heap)内存 ...
- leetcode987
public class Solution { private Dictionary<int, List<KeyValuePair<int,int>>> dic = ...
- CSS3 过渡动画
实现如下效果:当鼠标移动到图片上是图片有类似于放大镜放大的效果 transition : CSS属性 时间 当transition中监测的css属性发生变化时,会触发动画 .img_box img{ ...
- 浅析USB HID ReportDesc (HID报告描述符)
在USB中,USB Host是通过各种描述符来识别识别设备的,一般在设备枚举的过程将会获取有设备描述符/配置描述符/接口描述符/端点描述符/字符串描述符等 现在我们来介绍一下HID ReportDes ...