vue實(shí)現(xiàn)的下拉框功能示例

更新時(shí)間：2019年01月29日 08:33:52 作者：s_psycho

這篇文章主要介紹了vue實(shí)現(xiàn)的下拉框功能,涉及vue.js數(shù)據(jù)讀取、遍歷、事件響應(yīng)等相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了vue實(shí)現(xiàn)的下拉框功能。分享給大家供大家參考，具體如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.dhdzp.com 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é)果：

希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

vue2從數(shù)據(jù)變化到視圖變化之diff算法圖文詳解
這篇文章主要介紹了vue2從數(shù)據(jù)變化到視圖變化之diff算法圖文詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
vscode 使用Prettier插件格式化配置使用代碼詳解
這篇文章主要介紹了vscode 使用Prettier插件格式化配置使用，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-08-08
Vue 修改網(wǎng)站圖標(biāo)的方法
這篇文章主要介紹了Vue 修改網(wǎng)站圖標(biāo)的方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2020-12-12
vue前端RSA加密java后端解密的方法實(shí)現(xiàn)
本文主要介紹了vue前端RSA加密java后端解密的方法實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-02-02
淺談vue中改elementUI默認(rèn)樣式引發(fā)的static與assets的區(qū)別
下面小編就為大家分享一篇淺談vue中改elementUI默認(rèn)樣式引發(fā)的static 與assets的區(qū)別，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
Vue3封裝localStorage基本使用示例詳解
localStorage 和 sessionStorage 屬性允許在瀏覽器中存儲(chǔ) key/value 對(duì)的數(shù)據(jù),localStorage 用于長久保存整個(gè)網(wǎng)站的數(shù)據(jù),保存的數(shù)據(jù)沒有過期時(shí)間,直到手動(dòng)去刪除,本文給大家介紹Vue3封裝localStorage-基本使用,感興趣的朋友一起看看吧
2023-12-12
vue導(dǎo)航欄部分的動(dòng)態(tài)渲染實(shí)例
今天小編就為大家分享一篇vue導(dǎo)航欄部分的動(dòng)態(tài)渲染實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
淺談vue中所有的封裝方式總結(jié)
因?yàn)楝F(xiàn)在vue的流行,vue的各種插件都出來了,我們公司也是使用vue做項(xiàng)目，那么應(yīng)該如何封裝，本文就介紹一下如何封裝，感興趣的可以了解一下
2021-07-07
關(guān)于iview和elementUI組件樣式覆蓋無效問題及解決
這篇文章主要介紹了關(guān)于iview和elementUI組件樣式覆蓋無效問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
Vue中的偵聽器及使用場(chǎng)景
Vue中的偵聽器是一種響應(yīng)式機(jī)制，可以對(duì)指定的數(shù)據(jù)進(jìn)行監(jiān)聽，并在數(shù)據(jù)變化時(shí)執(zhí)行相應(yīng)的回調(diào)函數(shù)。常用于監(jiān)聽復(fù)雜數(shù)據(jù)類型的變化，如對(duì)象和數(shù)組。通過偵聽器，可以實(shí)現(xiàn)數(shù)據(jù)的自動(dòng)更新和邏輯處理等功能，提高代碼的可讀性和可維護(hù)性
2023-05-05