<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="css/special.css" target="_blank" rel="external nofollow" rel="stylesheet" />
<script src="js/vue.min.js"></script>
</head>
<body>
<div class="pc-content">
<pre>基本用法
你可以在表單的 input 元素上使用 v-model 指令來建立雙向資料綁定。它會根據 input 元素的類型自動選取正确的綁定模式。
</pre>
<form id="demo">
<!-- text -->
<p>
<input type="text" v-model="msg" class="input-text">
{{msg}}
</p>
<!-- checkbox -->
<p>
<input type="checkbox" v-model="checked">
{{checked ? "yes" : "no"}}
</p>
<!-- radio buttons -->
<p>
<input type="radio" name="picked" value="one" v-model="picked">
<input type="radio" name="picked" value="two" v-model="picked">
{{picked}}
</p>
<!-- select -->
<p>
<select v-model="selected">
<option>one</option>
<option>two</option>
</select>
{{selected}}
</p>
<!-- multiple select -->
<p>
<select v-model="multiSelect" multiple>
<option>one</option>
<option>two</option>
<option>three</option>
</select>
{{multiSelect}}
</p>
</form>
</div>
<script type="text/javascript">
new Vue({
el: '#demo',
data: {
msg: 'hi!',
checked: true,
picked: 'one',
selected: 'two',
multiSelect: ['one', 'three']
}
});
</script>
</body>
</html>
![Element 中遠端搜尋的功能實作[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)