VUE 单选下拉框Select中动态加载 默认选中第一个
<lable>分类情况</lable>
<select v-model="content.tid">
<option v-for="type in types" :value="type.id" :key="type.id">
{{type.name}}
</option>
</select>
vue select下拉框绑定默认值:
首先option要加value值,以便v-model可以获取到对应选择的值
一、当没有绑定v-model,直接给对应的option加selected属性
二、当给select绑定了v-model的值的时候,要给v-model绑定的data值里写默认值
<template>
<div id ="learn-insert">
<h1>新增学习记录</h1>
<form v-if="!submmited">
<p>学习内容标题</p>
<input type="text" v-model="content.desc" required /> <p>学习详细内容</p>
<textarea type="text" v-model="content.details" required></textarea> <p>分类情况</p>
<select v-model="content.tid">
<option v-for="type in types" :value="type.id" :key="type.id">
{{type.name}}
</option> </select> <button v-on:click.prevent="post">添加学习内容</button>
</form> <div v-if="submmited" >
<h3>亲的学习内容已经发布成功</h3>
</div> <div id="preview">
<h3>内容概览</h3>
<p> 内容描述: {{content.desc}}</p>
<p> 内容详细描述: {{content.details}}</p>
<p> 内容详细描述: {{content.tid}}</p>
</div> </div>
</template> <script>
export default {
data() {
return {
content:{
id:"",
tid:"1",
uid:"",
datetime:"",
desc:"",
details:""
},
types:[],
submmited: false,
id:"1"
}
},
methods: {
post: function(){
this.$http.post('http://localhost:8085/content/add', this.content)
.then((data) =>{
console.log(data);
console.log(this.submmited);
this.submmited= true;
console.log(this.submmited);
}); } },
created(){
this.$http.get('http://localhost:8085/type/showall', true)
.then(function(response){
this.types=response.data;
console.log(this.types);
})
//,this.content.id=this.types[0].id }
} </script> <style scoped>
/*
#learn-insert *{
box-sizing: border-box;
} #learn-insert{
margin: 20px auto;
max-width: 600px;
padding: 20px;
}
*/
label{
display: block;
margin: 20px 0 10px;
} input[type="text"],textarea,select{
display: block;
width: 100%;
padding: 8px;
} textarea{
height: 200px;
} #checkboxes label{
display: inline-block;
margin-top: 0;
} #checkboxes input{
display: inline-block;
margin-right: 10px;
} button{
display: block;
margin: 20px 0;
background: crimson;
color: #fff;
border: 0;
padding: 14px;
border-radius: 4px;
font-size: 18px;
cursor: pointer;
} #preview{
padding: 10px 20px;
border: 1px dotted #ccc;
margin: 30px 0;
} h3{
margin-top: 10px;
}
</style>
VUE 单选下拉框Select中动态加载 默认选中第一个的更多相关文章
- 下拉框select中option居中样式
下拉框select中option居中样式 text-align:center;text-align-last:center;
- jquery+html三级联动下拉框及详情页面加载时的select初始化问题
html写的三个下拉框,如下: <select name="ddlQYWZYJ" id="ddl_QYWZYJ" class="fieldsel ...
- 一个简单的适用于Vue的下拉刷新,触底加载组件
一个简单的适用于Vue的上拉刷新,触底加载组件,没有发布npm需要时直接粘贴定制修改即可 <template> <div class="list-warp-template ...
- mvvm模式下在WPF项目中动态加载项目的程序集和类
在mvvm模式的wpf项目中有个需求需要去加载解决方案的程序集,并且根据程序集去动态加载当前程序集的类,做成下拉框形式. 效果: //全局定义 private ComboBox abList= nul ...
- vue获取下拉框select的值
1.我写的是循环遍历,然后获取id :value="v.id"这就是获取的id然后打印就可以获取id了
- 【jQuery获取下拉框select、单选框radio、input普通框的值和checkbox选中的个数】
radio单选框:name属性相同 <input type="radio" id="sp_type" name="p_type" va ...
- struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input
原文地址:struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input jsp页面 1 function dosearch() {2 if ($(&q ...
- JQuery操作下拉框 select
要实现这种效果: html代码 1<script src="js/jquery-1.7.2.min.js"></script> 2 <table> ...
- vue获取下拉框值
vue获取下拉框的值,用vue-modle,只有点击下拉框的值才会赋值到下拉框中,初始时下拉框没有数据,而改用$event就不会出现这样的问题,下面看代码以及图解: v-model解决方式: < ...
随机推荐
- 【Leetcode_easy】690. Employee Importance
problem 690. Employee Importance 题意:所有下属和自己的重要度之和,所有下属包括下属的下属即直接下属和间接下属. solution:DFS; /* // Employe ...
- jsplumb 流程图,常用功能配置记录
前言: jsplumb 有2个版本一个Toolkit Edition(付费版),另外一个就是Community Edition(社区版本).Toolkit Edition版本功能集成的比较丰富,社区版 ...
- 【c# 学习笔记】密封类
密封类不可以被另外一个类继承,如果强行在代码中继承一个密封类,编译时就会产生错误. c#使用sealed关键字来定义密封类,如下: //定义密封类 public sealed class Sealed ...
- Information retrieval (IR class2)
1. 解析文档一般要分析哪些方面? - 首先分析文档的格式,是docx,html,xml,pdf... - 其次分析文档的语言,是英语,汉语,日语,德语... - 使用的什么字符集,ASCII编码, ...
- for i in range()
for i in range()就是python中的循环语句 有以下三种常见用法: 1.range(3) [0,3)即0,1,2 2.range(1,3) [1,3)即1,2 3.range(1,5, ...
- [转帖]使用TOAD优化复杂SQL
独家秘笈!看下如何一键优化Oracle数据库复杂sql,DBA必备 https://www.toutiao.com/i6741208493644055053/ 原来toad 还有这种功能 感觉类似于 ...
- Sql Server\ MySql 日期
------------------MS Sql Server------------------ declare @ctrBeginTime =null; if(@ctrBeginTime Is N ...
- S03_CH11_基于TCP的QSPI Flash bin文件网络烧写
S03_CH11_基于TCP的QSPI Flash bin文件网络烧写 11.1概述 针对ZYNQ中使用QSPI BOOT的应用,将BOOT.bin文件烧写至QSPI Flash基本都是通过USB C ...
- Scratch运动模块——有趣的弹球游戏(一)
大家好!我是蓝老师,有了前几期Scratch的基础,相信大家早已摩拳擦掌,跃跃欲试了,甚至还有些小伙伴已经编写了非常不错的程序. 学习编程就是这样不断探索.主动思考.解决问题的过程. 本期内容: 课程 ...
- ftp-server(对象存储)
1.背景 在腾讯云弄了一个对象存储,想通过ftp上传照片 说明连接: 腾讯云:https://cloud.tencent.com/document/product/436/7214 GitHub:ht ...