vue中select设置默认选中

一、总结

一句话总结:

通过v-model来:select上v-model的值为option默认选中的那项的值(value)

二、select设置默认选中实例

博客对应视频位置:1、vue中select设置默认选中
https://fanrenyi.com/video/7/22

 <div class="form-group">
<label class="col-sm-2 control-label">所属课程</label>
<div class="col-sm-10">
<div style="line-height: 34px;">
<button type="button" v-for="lesson in lessons" :class="[lesson_id==lesson.l_id ? 'btn btn-success btn-xs' : 'btn btn-info btn-xs']" style="margin-right: 5px;margin-bottom: 5px;" @click="get_chapters(lesson.l_id)">@{{ lesson.l_title }}</button>
</div> </div>
</div>
<div class="form-group">
<label for="v_c_id" class="col-sm-2 control-label">所属章节</label> <div class="col-sm-10">
<select v-model="chapter_select" name="v_c_id" id="v_c_id" class="form-control" required>
<option v-for="chapter in chapters" :value="chapter.c_id">@{{chapter.c_name}}</option>
</select>
</div>
</div> <script>
//console.log(window.chapter_url);
new Vue({
el:"#edit_video",
data:{
lessons:window.lessons,
chapters:window.chapters,
lesson_id:window.lesson_id,
chapter_select:window.video_chapter_select,
},
methods:{
get_chapters:function (lesson_id) {
this.lesson_id=lesson_id;
let url=window.get_chapters_url+'/'+lesson_id;
this.$http.post(url, {_token: "{{csrf_token()}}"}).then(function (result) {
layer_alert_success('获取数据成功!');
// 通过 result.body 拿到服务器返回的成功的数据
this.chapters=result.body.chapters;
//console.log(result.body)
//console.log(result.body.data.data)
},response => {
// error callback
layer_alert_fail('获取数据失败!'); })
}
}
});
</script>

第14行:给select元素绑定的v-model的值是 默认option的value

第28行:这里是设置 chapter_select 的默认值

通过v-model来:select上v-model的值为option默认选中的那项的值(value)

三、参考资料:vue中select的使用以及select设置默认选中

转自或参考:vue中select的使用以及select设置默认选中
https://www.cnblogs.com/till-the-end/p/8473738.html

简介

今天写pc端引入vue,遇到了一个问题,就是我循环出select内的数据以后,发现原本默认显示第一条的select框变成了空白,要选择后才有显示,结果查了好多文档,讲的都不是很清楚,后来看到一句提示,试了一下发现居然还有这种隐藏属性。所以,我决定自己写下来,讲清楚。

解决过程

html代码如下,通过v-model可以获取到选中的值,如果option中存在value属性,优先获取value值即coupon.id,如果不存在,则获取option的文本内容,也就是下面代码中coupon.name.

<select name="public-choice" v-model="couponSelected" @change="getCouponSelected">
<option :value="coupon.id" v-for="coupon in couponList" >{{coupon.name}}</option>
</select>

首先说明,html这样写没有任何问题,动态的select的正确使用方法就是这样。

下面是js代码:

        var vm = new Vue({
el: '#app',
data:{
couponList:[
{
id: 'A',
name: '优惠券1'
},
{
id: '1',
name: '优惠券2'
},
{
id: '2',
name: '优惠券3'
}
],
couponSelected: '',
},
created(){
            //如果没有这句代码,select中初始化会是空白的,默认选中就无法实现
this.couponSelected = this.couponList[0].id;
},
methods:{
            getCouponSelected(){
                        //获取选中的优惠券
                        console.log(this.couponSelected)
                    }
                }
})

上面的js代码是正确的,我下面说明一下隐藏属性是什么

隐藏属性就是

当我们把v-model中的couponSelected,也就是data里的couponSelected的值赋值为循环的option中的value后,那这个option就会被默认选中

小结

这篇文章其实主要是说select默认选中的问题,select使用以及数据获取只是顺带说明,vue关于表单元素的使用,如单选,复选可以参考官方文档,现在的官方文档其实已经写得很不错了,放链接https://cn.vuejs.org/v2/guide/forms.html,感兴趣的话可以看一下,试一下。

 

vue中select设置默认选中的更多相关文章

  1. Vue 中select option默认选中的处理方法

    在做泰康项目的时候有个需求就是要给select默认选中的样式我的处理方法有两个 1.直接将默认值给  selectedOption <select v-model="selectedO ...

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

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

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

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

  4. HTML中的&lt;select&gt;标签如何设置默认选中的选项

    方法有两种. 第一种通过<select>的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果. 1 2 3 4 5 < select  id =  " ...

  5. Android RadioGroup中设置默认选中RadioButton 后,选中两个的问题 解决方法

    项目中遇到多个RadioGroup中单选RadioButton ,设置了默认选中第一个 . 然后就 能选中两个RadioButton . . .. 我开始这样给设置默认选中一个的: for (int ...

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

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

  7. AngularJS的select设置默认值

    AngularJS的select设置默认值 在使用Angular时候使用select标签时会遇到绑定数据指定默认显示值可这样实现 <!DOCTYPE html> <html ng-a ...

  8. echarts圆饼图设置默认选中项并在中间显示文字

    效果: 代码: var myChart = echarts.init(document.getElementById('quanshi-echarts-two')); option = { grid: ...

  9. iOS设置UITableView中Cell被默认选中后怎么触发didselect事件

    //默认选中某个cell [self.searchResultTV selectRowAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:0] a ...

随机推荐

  1. Python 100道题深入理解

    # -*- coding: utf-8 -*-# 题目:有1.2.3.4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少?# 程序分析:可填在百位.十位.个位的数字都是1.2.3.4.组成所 ...

  2. OC最实用的runtime总结,面试、工作你看我就足够了!

    前言 runtime的资料网上有很多了,部分有些晦涩难懂,我通过自己的学习方法总结一遍,主要讲一些常用的方法功能,以实用为主,我觉得用到印象才是最深刻的,并且最后两个demo也是MJExtension ...

  3. 收集 数据库的awr数据,生成报告

    该脚本只是把awr报告的内容,原封不动的 展现出来,做记录 awrreport.sql  脚本内容如下: *********************************************** ...

  4. Lucene多字段搜索

    最近在学习Lucene的过程中遇到了需要多域搜索并排序的问题,在网上找了找,资料不是很多,现在都列出来,又需要的可以自己认真看看,都是从其他网站粘贴过来的,所以比较乱,感谢原创的作者们!     使用 ...

  5. ThinkPHP - 连贯操作 - 【实现机制】

    <?php //模型类 class Model { //数据库连接 private $_conn = NULL; //where语句 private $_where = NULL; //表名称 ...

  6. html button 点击链接

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. C++中 #include&lt;&gt;与#include&quot;&quot;

    #include<> 使用尖括号表示在包含文件目录中去查找(包含目录是由用户在设置环境时设置的),而不在源文件目录去查找: #include"" 使用双引号则表示首先在 ...

  8. java人民币读法转换

    实现浮点数转换成人民币读法字符串 编写一个程序,将浮点数转换成人民币读法字符串,例如,将1006.333转换为壹千零陆元叁角叁分. 题意分析: 将浮点数分成整数部分和小数部分,分开处理整数部分和小数部 ...

  9. java中Iterator和ListIterator的区别与联系

    首先,为什么需要使用迭代器Iterator,原有的for循环和for each不能满足需求吗? 那是因为Iterator模式是用于遍历集合类的标准访问方法.它可以把访问逻辑从不同类型的集合类中抽象出来 ...

  10. 完整版本的推箱子小游戏,最简单的纯C语言打造

    /* 推箱子小游戏 1.定义绘制样式 用二维数组的方式 2.绘制图像 3.找出当前位置 4.逻辑判断,制造动作 根据数学xy轴的规律,这里使用ij 上移,行轴上升,行数减少 下移,行数下降,函数增加 ...