最新公告
  • 欢迎您光临AA分享网,一个高级程序员的学习、分享的分享平台!立即加入我们
  • vue.js怎么实现下拉框

    本文环境:windows7、vue2.9.6,该方法适用于所有品牌的电脑。

    vue.js实现下拉框的方法:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>www.php.cn vue下拉框</title>
      <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
    </head>
    <body>
    <div id="app">
      <select v-model="one">
        <option v-for="x in shuju">{{x.name}}{{x.famname}}</option>
      </select><br>
      <div>
        <span>{{one}}</span><br>
        <span>{{oneF}}</span><br>
        <span>{{oneL}}</span>
      </div>
    </div>
    <script>
      let rua=new Vue({
        el:"#app",
        data:{
          shuju:[
            {name:"孙",famname:"悟空"},
            {name:"猪",famname:"八戒"},
            {name:"沙",famname:"悟净"}
          ],
          one:""
        },
        computed:{
          oneF(){
            return this.one.charAt(0);
          },
          oneL(){
            return this.one.slice(1,3);
          }
        }
      });
    </script>
    </body>
    </html>

    这里使用在线HTML/CSS/JavaScript代码运行工具测试上述代码,可得如下运行结果:

    ea7ae30907ce666a5f757525e914a8a.png

    以上就是vue.js怎么实现下拉框的详细内容,更多请关注其它相关文章!

    AA分享网一个高级程序员的学习、分享的IT资源分享平台
    AA分享网-企业网站源码-PHP源码-网站模板-视频教程-IT技术教程 » vue.js怎么实现下拉框
    • 257会员总数(位)
    • 5903资源总数(个)
    • 14本周发布(个)
    • 6 今日发布(个)
    • 540稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情