當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

props属性

發布時間：2024/1/23 编程问答 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 props属性小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>props屬性</title><script src="js/vue.js"></script></head><body><div id="app"><csdn message="hello"></csdn></div><script>//注冊Vue.component('csdn',{//聲明propsprops:['message'],//同樣也可以在vm中像使用this.message使用template:'<span>{{message}}</span>'})//創建根實例;new Vue({el:'#app'})</script></body> </html>

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>prop實例</title><script src="js/vue.js"></script></head><body><div id="app"><ol><todo-item v-for="item in sites" v-bind:todo="item"></todo-item></ol></div><script>Vue.component('todo-item',{props:['todo'],template:'<li>{{todo.text}}</li>'})new Vue({el:'#app',data:{sites:[{text:'CSDN'},{text:'aaa.net'},{text:'china.net'}]}})</script></body> </html>

?輸出：

CSDN

aaa.net

china.net

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>select列表元素</title><script src="js/vue.js"></script></head><body><div id="app"><select v-model="selected" name="fruit"><option value="">請選擇一個網站:</option><option value="www.csdn.net">CSDN</option><option value="www.aaa.com">aaa</option></select><div id="output">選擇的網站是:{{selected}}</div></div><script>new Vue({el:'#app',data:{selected:''}})</script></body> </html>

下拉輸出：...

?選擇的網站是:www.csdn.net

總結

以上是生活随笔為你收集整理的props属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

属性
props