props属性

算法
算法讲解
tea_year
<!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',{
				//声明props
				props:['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>

 输出:

 

  1. CSDN
  2. aaa.net
  3. 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-->
			<div id="output">
				选择的网站是:{{selected}}
			</div>
		</div>
		<!--js-->
		<script>
			new Vue({
				el:'#app',
				data:{selected:''}
			})
		</script>
	</body>
</html>

下拉输出:...

 选择的网站是:www.csdn.net

 

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 创作都市 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读