vue如何實(shí)現(xiàn)下拉框功能

發(fā)布時(shí)間：2021-04-02 11:15:58 來(lái)源：億速云閱讀：1746 作者：小新欄目：web開發(fā)

這篇文章主要介紹了vue如何實(shí)現(xiàn)下拉框功能，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

vue實(shí)現(xiàn)下拉框功能的具體代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.jb51.net 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代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼，可得如下運(yùn)行結(jié)果：

vue如何實(shí)現(xiàn)下拉框功能

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“vue如何實(shí)現(xiàn)下拉框功能”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

向AI問(wèn)一下細(xì)節(jié)

vue如何實(shí)現(xiàn)下拉框功能

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽