vue實現的下拉框功能示例
更新時間：2019年01月29日 08:33:52 作者：s_psycho
這篇文章主要介紹了vue實現的下拉框功能,涉及vue.js數據讀取、遍歷、事件響應等相關操作技巧,需要的朋友可以參考下
本文實例講述了vue實現的下拉框功能。分享給大家供大家參考，具體如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>m.fzitv.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代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼，可得如下運行結果：
希望本文所述對大家vue.js程序設計有所幫助。
相關文章
這篇文章主要介紹了vue2從數據變化到視圖變化之diff算法圖文詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
vscode 使用Prettier插件格式化配置使用代碼詳解
這篇文章主要介紹了vscode 使用Prettier插件格式化配置使用，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-08-08
這篇文章主要介紹了Vue 修改網站圖標的方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
本文主要介紹了vue前端RSA加密java后端解密的方法實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-02-02
淺談vue中改elementUI默認樣式引發(fā)的static與assets的區(qū)別
下面小編就為大家分享一篇淺談vue中改elementUI默認樣式引發(fā)的static 與assets的區(qū)別，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
localStorage 和 sessionStorage 屬性允許在瀏覽器中存儲 key/value 對的數據,localStorage 用于長久保存整個網站的數據,保存的數據沒有過期時間,直到手動去刪除,本文給大家介紹Vue3封裝localStorage-基本使用,感興趣的朋友一起看看吧2023-12-12
今天小編就為大家分享一篇vue導航欄部分的動態(tài)渲染實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
因為現在vue的流行,vue的各種插件都出來了,我們公司也是使用vue做項目，那么應該如何封裝，本文就介紹一下如何封裝，感興趣的可以了解一下2021-07-07
關于iview和elementUI組件樣式覆蓋無效問題及解決
這篇文章主要介紹了關于iview和elementUI組件樣式覆蓋無效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue中的偵聽器是一種響應式機制，可以對指定的數據進行監(jiān)聽，并在數據變化時執(zhí)行相應的回調函數。常用于監(jiān)聽復雜數據類型的變化，如對象和數組。通過偵聽器，可以實現數據的自動更新和邏輯處理等功能，提高代碼的可讀性和可維護性2023-05-05