props属性

最新推荐文章于 2023-10-14 00:03:35 发布

teayear

最新推荐文章于 2023-10-14 00:03:35 发布

阅读量628

点赞数

CC 4.0 BY-SA版权

分类专栏：前端技术道本自然文章标签： vue props select v-for指令

本文链接：https://blog.youkuaiyun.com/zhangchen124/article/details/86578125

道本自然同时被 2 个专栏收录

741 篇文章

订阅专栏

前端技术

264 篇文章

订阅专栏

<!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:'优快云'},
						{text:'aaa.net'},
						{text:'china.net'}]
				}
			})
		</script>
	</body>
</html>

输出：

优快云
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.youkuaiyun.com">优快云</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.youkuaiyun.com