表单绑定
<!-- <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表單綁定</title>
</head>
<body><form id="box"><!--v-model 綁定p標(biāo)簽，讓input 輸入值同步到p標(biāo)簽--><!--<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:[], //每個(gè)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 選出來的是一個(gè)數(shù)組。})
</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:'選中', //每個(gè)checkbox加上value后，其值就不是true和false了，而是value。b:'未選中'}})// 因?yàn)閠oggle在選中和取消選中時(shí)會(huì)在true和false之間來回切換，v-bind:true-value="a"就是說當(dāng)切換到true的時(shí)候，讓toggle的值等于動(dòng)態(tài)數(shù)據(jù)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:'當(dāng)input一輸入值，視圖就有了變化。有時(shí)候你不想這么高度同步，而是等輸入完了，視圖再變化，可以這樣寫：',age:'如果你想讓輸入的數(shù)據(jù)自動(dòng)轉(zhuǎn)化為數(shù)字的話，可以這樣寫：',msgg:'自動(dòng)去除字符串首尾空格。trim這個(gè)方法jquery有，原生的js卻沒有。'}})</script></html>
?
轉(zhuǎn)載于:https://www.cnblogs.com/jinsuo/p/7642128.html
總結(jié)
- 上一篇： [web 安全] php随机数安全问题
- 下一篇： node经验总结（一）