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>'})//創(chuàng)建根實(shí)例;new Vue({el:'#app'})</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="">請選擇一個(gè)網(wǎng)站:</option><option value="www.csdn.net">CSDN</option><option value="www.aaa.com">aaa</option></select><!--內(nèi)部div--><div id="output">選擇的網(wǎng)站是:{{selected}}</div></div><!--js--><script>new Vue({el:'#app',data:{selected:''}})</script></body>
</html>
?
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>prop實(shí)例</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>?輸出：
?
下拉輸出：...
?選擇的網(wǎng)站是:www.csdn.net
?
總結(jié)
- 上一篇： Vue组件之全局组件与局部组件
- 下一篇： Prop 验证