vue-input

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<div id="app">
			<!--<iframe src="vue.html" width="" height=""></iframe>-->
			<!--/*document.forms[0];//获取表单
			document.window.frames;//获取内联框架*/-->
			<!--文本-->
			<input type="text" v-model="message" />
			<p>messahe is:{{message}}</p>
			<!--多行文本-->
			<textarea name="" rows="" cols="" v-model="txt_are"></textarea>
			<p>txt_are is:{{txt_are}}</p>
			<!--多选框-->
			<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
			Jack
			<input type="checkbox" id="john" value="John" v-model="checkedNames">
			john
			<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
			mike
			<p>你勾选了{{checkedNames}}</p>
			<!--单选按钮-->
			<input type="radio" id="one" value="男" v-model="picked">男
			<input type="radio" id="two" value="女" v-model="picked">女
			<p>性别:{{picked}}</p>
			<!--选择列表-->
			<select name="" v-model="txt_select" multiple="multiple">
				<option value="广州">广州</option>
				<option value="上海">上海</option>
				<option value="北京">北京</option>
				<option value="是吧">是吧</option>
			</select>
			<p>你的地址:{{txt_select}}</p>
			<!--动态选项,用 v-for 渲染:-->
			<select name="" v-model="active">
				<option value="" v-for="x in options" v-bind:value="x.value">
					{{x.Text}}
				</option>
			</select>
			<p>动态选择:{{active}}</p>
			<!--.number只能输入字符-->
			<input v-model.number="age" type="number">
			<p>lazy:{{age}}</p>			


		</div>

		<script src="js/vue.js" type="text/javascript"></script>
		<script type="text/javascript">
			var vue = new Vue({
				el: '#app',
				data: {
					message: '',
					txt_are: '',
					checkedNames: [],
					picked:'',
					txt_select:'',
					active:'',
					options:[
					{Text:'one',value:'A'},
					{Text:'two',value:'B'},
					{Text:'three',value:'C'}
					],
					age:'',
					old:''
				}

			})
		</script>
	</body>

</html>

  

posted @ 2017-08-15 10:38  LWJ_jay  阅读(575)  评论(0编辑  收藏  举报