<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="comp">
<p>{{msg}}</p>
<p>{{msg.split('')}}</p>
<p>{{ msg.split('').reverse()}}</p>
<p>{{ msg.split('').reverse().join()}}</p>
<p>{{ msg.split('').reverse().join('')}}</p>
<p>{{ reverseStr }}</p>
<button @click='clickHandel'>更改</button>
</div>
<form id="okk" action="">
<h5>單行文本：</h5>
<input type="text" v-model="msg" placeholder="請輸出用戶名">
<input type="number" v-model="msg">
<p>{{msg}}</p>
<h5>多行文本</h5>
<textarea name="" id="" cols="30" rows="10" v-model="msg2"></textarea>
<p>{{msg2}}</p>
<h5>單個復選框</h5>
<input type="checkbox" v-model="checked">
<label for="checkbox">{{checked}}</label>
<h5>多個復選框</h5>
<input type="checkbox" value="讀書" v-model="checkedNames">
<label for="">讀書</label>
<input type="checkbox" value="音樂" v-model="checkedNames">
<label for="">音樂</label>
<input type="checkbox" value="旅游" v-model="checkedNames">
<label for="">旅游</label>
<p>Checked names: {{ checkedNames }}</p>
<h5>單選按鈕</h5>
<input type="radio" value="男" v-model="radioed">
<label for="">男</label>
<input type="radio" value="女" v-model="radioed">
<label for="">女</label>
<p>{{radioed}}</p>
<h5>單選框</h5>
<select name="" id="" v-model="selected">
<option >python</option>
<option >django</option>
<option >web</option>
<option >java</option>
</select>
<p>{{selected}}</p>
<h5>多選框</h5>
<select name="" id="" v-model="mulselected" multiple>
<option >python</option>
<option >django</option>
<option >web</option>
<option >java</option>
</select>
<p>{{mulselected}}</p>
</form>
<h5>for循環option</h5>
<form action="" id="okk1" >
<select name="" v-model=mulsel>
<option v-for='option in options' v-bind:value="option.value">
{{option.text}}
</option>
</select>
<p>{{mulsel}}</p>
</form>
<script>
new Vue({
el:'#comp',
data:{
msg:'學習Vue.js',
text:'好好學習，天天向上',
text2:'python.django,vue',
},
methods:{
clickHandel(){
this.text = '阿里巴巴';
this.reverseStr = 'javac++'
}
},
computed:{
reverseStr:{
// return this.text.split('').reverse().join(''),
set:function (newValue) {
this.text2 = newValue
},
get:function () {
return this.text2.split('').reverse().join('');
}
}
},
})
new Vue({
el:'#okk',
data:{
msg:'',
msg1:'學習學習',
msg2:'Vue.js學習\nwww.vue.js.com',
checked:'',
checkedNames:[],
radioed:'',
selected:'',
mulselected:[],
}
})
new Vue({
el:'#okk1',
data:{
mulsel:'vue',
options:[
{text:1,value:'vue'},
{text:2,value:'js'},
{text:3,value:'go'},
]
}
})
</script>
</body>
</html>
