<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单绑定</title>
</head>
<body>
<form id="box">
<!--v-model 绑定p标签，让input 输入值同步到p标签-->
<!--
<input type="text" v-model="message" placeholder="edit me">
<textarea v-model="message" placeholder="add multiple lines"></textarea>
<p>Message is:{{message}}</p>
多选框 input:checkbox
<input type="checkbox" id="check" v-model="checked">
<label for="check">{{checked}}</label>
<!-- checked值将在ture和false之间切换。
</form>
</body>
<script type="text/javascript" src="js/Vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
message:'aaaaa',
checked:true,
}
})
</script>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多选框</title>
</head>
<body>
<form id="box">
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</form>
</body>
<script type="text/javascript" src="js/Vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
checkedNames:[], //每个checkbox加上value后，其值就不是true和false了，而是value。
}
})
</script>
</html> -->
<!--
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单选框</title>
</head>
<body>
<form id="box">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
</form>
</body>
<script type="text/javascript" src="js/Vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
picked:[]
}
})
</script>
</html> -->
<!--
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单选框</title>
</head>
<body>
<form id="box">
<select v-model="selected" multiple="multiple">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</form>
</body>
<script type="text/javascript" src="js/Vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
selected:[]
}
//multiple 选出来的是一个数组。
})
</script>
</html>
-->
<!--
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多选框</title>
</head>
<body>
<form id="box">
<input type="checkbox" id="jack" v-bind:true-value="a" v-bind:false-value="b" v-model="toggle">
<label for="jack">Jack</label>
<p>{{toggle}}</p>
</form>
</body>
<script type="text/javascript" src="js/Vue.js"></script>
<script type="text/javascript">
var vm=new Vue({
el:'#box',
data:{
toggle:'',
a:'选中', //每个checkbox加上value后，其值就不是true和false了，而是value。
b:'未选中'
}
})
// 因为toggle在选中和取消选中时会在true和false之间来回切换，v-bind:true-value="a"就是说当切换到true的时候，让toggle的值等于动态数据a
</script>
</html>
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>radio单选</title>
</head>
<body>
<form id="box">
<input type="radio" v-model="toggle" v-bind:value="a" checked="checked" >
<input id="togg" type="radio" v-model="toggle" v-bind:value="b">
<p>{{toggle}}</p>
<input v-model.lazy="msg">
<p>{{msg}}</p>
<input v-model.number="age">
<p>{{age}}</p>
<input v-model.trim="msgg">
<p>{{msgg}}</p>
</form>
</body>
<script type="text/javascript" src="js/Vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
toggle:[],
a:'选中的a',
b:'选中的b',
msg:'当input一输入值，视图就有了变化。有时候你不想这么高度同步，而是等输入完了，视图再变化，可以这样写：',
age:'如果你想让输入的数据自动转化为数字的话，可以这样写：',
msgg:'自动去除字符串首尾空格。trim这个方法jquery有，原生的js却没有。'
}
})
</script>
</html>
浙公网安备 33010602011771号