<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">
</script>
<script>
window.onload=function(){
var example4 = new Vue({
el: '#example-4',
data: {
message: '',
checked: false,
checkedNames: [],
picked: '',
selected: 'A',
selectedMulti: [],
selectedVFor: '',
options:[
{ text:'A',value:'A' },
{ text:'B',value:'B' },
{ text:'C',value:'C' }
]
}
})
}
</script>
<body>
<!-- 文本 -->
<!--<div id="example-4">
<input v-model="message" placeholder="edit me"></input>
<p> Message is:{{message}}</p>
</div>-->
<!-- 多行文本 -->
<!--<div id="example-4">
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{message}}</p>
<br />
<textarea v-model="message" placeholder="add multiple lines"></textarea>
</div>-->
<!-- 复选框-单个复选框，绑定到布尔值 -->
<!--<div id="example-4">
<input type="checkbox" id="checkbox" v-model="checked"></input>
<label for="checkbox">{{checked}}</label>
</div>-->
<!-- 复选框-多个复选框，绑定到同一个数组 -->
<!-- <div id="example-4">
<input type="checkbox" id="jack" value="jack"
v-model="checkedNames"></input>
<label for="jack">jack</label>
<input type="checkbox" id="john" value="john"
v-model="checkedNames"></input>
<label for="john">john</label>
<input type="checkbox" id="mike" value="mike"
v-model="checkedNames"></input>
<label for="mike">mike</label>
<br />
<span>Checked names: {{ checkedNames }}</span>
</div>-->
<!-- 单选按钮 -->
<!--<div id="example-4">
<input type="radio" id="one" value="one" v-model="picked"></input>
<label for="one">one</label>
<br />
<input type="radio" id="two" value="two" v-model="picked"></input>
<label for="two">two</label>
<br />
<span>Picked: {{ picked }}</span>
</div>-->
<!-- 下拉选择 -->
<!--<div id="example-4">
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>-->
<!-- 下拉框-多选 -->
<!--<div id="example-4">
<select v-model="selectedMulti" multiple style="width: 50px;">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selectedMulti }}</span>
</div>-->
<!-- 下拉框-多选-v-for渲染动态选项 -->
<!--<div id="example-4">
<select v-model="selectedVFor">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text}}
</option>
</select>
<span>Selected: {{ selectedVFor }}</span>
</div>-->
</body>
</html>
Vue.js中使用v-model实现表单输入绑定
猜你喜欢
转载自blog.csdn.net/taotao_guiwang/article/details/91435692
今日推荐
周排行