IMweb训练营作业（二）-select组件创建

最新推荐文章于 2024-07-25 11:00:49 发布

_胡杰

最新推荐文章于 2024-07-25 11:00:49 发布

阅读量871

点赞数 1

分类专栏： web前端开发，框架处理文章标签： vue.js 框架 javascript 界面

本文链接：https://blog.csdn.net/hujie09/article/details/70310167

版权

web前端开发，框架处理专栏收录该内容

3 篇文章 0 订阅

订阅专栏

--------------------------------------------------------------------------------------------------------展示效果-----------------------------------------------------------------------------------------------------------

代码块：1）

HTML部分：

<body>
<div id="selected">
    <select v-model="selected">  
  <option v-for="option in op" v-bind:value="option.value">  
    {{ option.text }}  
  </option>  
</select>  
<div>下拉框: {{ selected }}</div>  
    <script src="./app.js"></script>
</div>
</body>

代码块2）

JS部分：

new Vue({  
  el: '#selected',  
  data: {  
    selected: 'IMweb训练营作业',  
    op: [  
      { text: 'IMweb训练营作业（一）', value: 'todolist' },  
      { text: 'IMweb训练营作业（二）', value: 'select组件创建' },  
      { text: 'IMweb训练营作业（三）', value: '用vue写一个APP' }  
    ]  
  }  
})