在做泰康项目的时候有个需求就是要给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默认选中的处理方法的更多相关文章

  1. vue中select设置默认选中

    vue中select设置默认选中 一.总结 一句话总结: 通过v-model来:select上v-model的值为option默认选中的那项的值(value) 二.select设置默认选中实例 < ...

  2. struts2设置<s:select>默认选中项的方法

    struts2的select标签中,常用的有以下几个属性:(1)struts2中的select 标签中,必须设置的属性只有一个,即是list.(2)select标签的list中必须有值,不然会报错.如 ...

  3. select()事件默认选中文本框的全部内容,并改变其背景色和文字颜色

    1.select()事件默认选中文本框的全部内容 拿到input标签的节点,调用select()方法即可.但是我做的vue项目中调用了此方法有一个bug,单次点击会全选内容,双次点击的时候全选会闪一下 ...

  4. Vue Echarts 饼图设置默认选中一个

    Vue Echarts 饼图设置默认选中一个 myChart.setOption(data) // data伟echarts所需要传入的参数,就是配置参数最多的那个玩意 myChart.dispatc ...

  5. 浅谈Vue中计算属性(computed)和方法(methods)的差别

    浅谈Vue中计算属性(computed)和方法(methods)的差别 源码地址 methods方法和computed计算属性,两种方式的最终结果确实是完全相同 计算属性是基于它们的响应式依赖进行缓存 ...

  6. vue中select的使用以及select设置默认选中

    简介 今天写pc端引入vue,遇到了一个问题,就是我循环出select内的数据以后,发现原本默认显示第一条的select框变成了空白,要选择后才有显示,结果查了好多文档,讲的都不是很清楚,后来看到一句 ...

  7. js中的new Option默认选中

    new Option("文本","值",true,true).后面两个true分别表示默认被选中和有效! //js默认选中 var sel = document ...

  8. ionic中ng-options与默认选中第一项的问题

    1. select中动态添加数据时发现一个选项为空,在选中了其他选项时,在点击时发现第一个空选项消失了,所有我们需要设置一个默认的选项: 2. 开始的时候我用的方法: <select class ...

  9. 用jQuery的attr()设置option默认选中无效的解决 attr设置属性失效

    表单下拉选项使用selected设置,发现第一次默认选中成功,在页面不刷新的情况下,再次下拉,selected属性设置了,默认选中不生效 在手机端有些浏览器用jQuery的attr()方法设置sele ...

随机推荐

  1. day6作业(元组,字典,集合)

    默写: 1.元组 字典 集合 列表 各自的特点 2.字典添加 删除 修改 循环 必做: 1.餐厅提供了五种不同的菜,使用元组来存储他们,并循环打印出所有菜名,要求用户输入新加的菜名,加入到菜单中,并重 ...

  2. WPF 自定义分页控件二

    一:添加自定义分页控件,命名为KDataPagerTwo: public class KDataPagerTwo : Control, INotifyPropertyChanged { static ...

  3. 关于W8.1不能安装VS2015(包括2017等)

    电脑本来是W7 64位+OPENCV3.1,今天突然系统崩溃了,然后感觉W7过时了遇到很多问题直接系统崩溃还得了啊,干脆装了一个W8.1了. 好吧~~本来想直接说问题的,干脆先把装系统给记录一下--& ...

  4. ERROR: iterator not incrementable || iterator not decrementable

    这个错误提示:迭代器不可以增加 exmaple: vector<int> tVecInt; vector<int>::reverse_iterator iterInt = tV ...

  5. this 基础使用方法

    在Java中,this是调用类中变量和内部类的构造方法的关键词,在对象有同名变量时,可以指定类的变量. 例子1: package example_1; import java.lang.*; publ ...

  6. Junit Rdeis No tests found matching 单机版安装

    redis安装(SecureCRT工具上传redis 3.0.0) 1.mkdir redis 创建文件夹2.tar –zxvf redis-3.0.0.tar.gz –C /redis/ 解压到re ...

  7. Ubuntu 下安装 Swoole

    环境:Ubuntu16.04 apt-get update apa-get install apache2 php php-pear php-dev mysql-server gcc apache2 ...

  8. node.js 递归创建多级目录

    fs.mkdir只能创建一级目录,所以我们可以自定义一个mkdirs函数,利用递归和回调来实现创建多级目录. function mkdirs(dirname, callback) { //检测目录是否 ...

  9. vue中修改了数据但视图无法更新的情况[转载]

    我们有时候常碰到vue中明明修改了数据,但是视图无法更新,因此我总结了一点点碰到此类的情况: 1.v-for遍历的数组,当数组内容使用的是arr[0].xx =xx更改数据,vue无法监测到 数组数据 ...

  10. hadoop配置2.6.1 centos7

    上传文件(分发)的三种方式: 1.本地: -file 的模式,上传一些小的文件. 例如: -file ./test INPUT_FILE_PATH_1="/The_Man_of_Proper ...