技術標籤：vue學習vue

文字

<div id="app">
			<!--文字框-->
			<div>
				<input v-model="message" placeholder="edit me"/>
				<p>message={{message}}</p>
			</div>
		</div>
		<script type="text/javascript">
			var data = {
 

				message:""
			}
			var app = new Vue({
				"el":"#app",
				data:data
			});
		</script>

多行文字

<div id="app">
			<!--多行文字-->
			<div>
				<textarea v-model="textarea"></textarea>
				<p>textarea:{{textarea}
 
}</p>
			</div>
		</div>
		<script type="text/javascript">
			var data = {
				textarea:""
			}
			var app = new Vue({
				"el":"#app",
				data:data
			});
		</script>

複選框

<div id="app">
			<!--複選框-->
			<div>
 

				<input type="checkbox" v-model="checkbox" value="a"/>
				<input type="checkbox" v-model="checkbox" value="b"/>
				<input type="checkbox" v-model="checkbox" value="c"/>
				<p>checkbox:{{checkbox}}</p>
			</div>
		</div>
		<script type="text/javascript">
			var data = {
				checkbox:[]
			}
			var app = new Vue({
				"el":"#app",
				data:data
			});
		</script>

單選按鈕

<div id="app">
                <!--單選按鈕-->
			<div>
				<input type="radio" v-model="radio" value="a"/>
				<input type="radio" v-model="radio" value="b"/>
				<div>radio:{{radio}}</div>
			</div>
		</div>
		<script type="text/javascript">
			var data = {
				radio:''
			}
			var app = new Vue({
				"el":"#app",
				data:data
			});
		</script>

下拉框

<div id="app">
			<!--選擇框select-->
			<div>
				<select v-model="select">
					<option v-for="option in options" v-bind:value="option.value">{{option.text}}</option>
				</select>
				<div>select:{{select}}</div>
			</div>
		</div>
		<script type="text/javascript">
			var data = {
				options:[
					{value:"v1", text:"t1"},
					{value:"v2", text:"t2"},
					{value:"v3", text:"t3"}
				],
				select:""
			}
			var app = new Vue({
				"el":"#app",
				data:data
			});
		</script>

修飾符lazy

只有在文字框失去焦點時，才會改變

<div id="app">
			<!--修飾符lazy，只有在文字框失去焦點時，才會改變msg的值-->
			<div>
				<input v-model.lazy="msg"/>
				<div>msg:{{msg}}</div>
			</div>
		</div>
		<script type="text/javascript">
			var data = {
				mess
				msg:""
			}
			var app = new Vue({
				"el":"#app",
				data:data
			});
		</script>