VUE 单选下拉框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="" required />



 



            <p>学习详细内容</p>



            <textarea type="text" v-model="" required></textarea>



 



 



            <p>分类情况</p>



            <select v-model="">



                <option v-for="type in types"  :value="" :key="">



                   {{}}



                </option>



 



            </select>



 



            <button v-on:="post">添加学习内容</button>



        </form>



 



 



        <div v-if="submmited" >



            <h3>亲的学习内容已经发布成功</h3>



        </div>



 



        <div id="preview">



        <h3>内容概览</h3>



        <p> 内容描述： {{}}</p>



        <p> 内容详细描述： {{}}</p>



        <p> 内容详细描述： {{}}</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://localhost:8085/content/add', this.content)



        .then((data) =>{



          (data);



          (this.submmited);



          this.submmited= true;



          (this.submmited);



      });



 



      }



      



  },



  created(){



    this.$('http://localhost:8085/type/showall', true)



      .then(function(response){



          this.types=;



          (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>