<!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>
浙公网安备 33010602011771号