console
var app = new Vue({
el: '#app',
data: {
myInput: '',
myTextArea: '',
myCheckBox: [],
myRadio: '',
mySelect: ''
}
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<div id="app">
<h1>v-model</h1>
<div class="panel">
<h2>1. 文本</h2>
<div class="panel-content">
<p>当前输入内容: <span>{{myInput}}</span></p>
<p>请你输入内容: <input type="text" v-model="myInput"/></p>
</div>
</div>
<div class="panel">
<h2>2. 多行文本</h2>
<div class="panel-content">
<p>当前输入内容: <span>{{myTextArea}}</span></p>
<p>请你输入内容: <textarea type="text" v-model="myTextArea"></textarea></p>
</div>
</div>
<div class="panel">
<h2>3. 复选</h2>
<div class="panel-content">
<p>当前输入内容: <span>{{myCheckBox}}</span></p>
<p>请你输入内容:
<input type="checkbox" id="jack" value="Jack" v-model="myCheckBox">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="myCheckBox">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="myCheckBox">
<label for="mike">Mike</label>
</p>
</div>
</div>
<div class="panel">
<h2>4. 单选</h2>
<div class="panel-content">
<p>当前输入内容: <span>{{mySelect}}</span></p>
<p>请你输入内容:
<select v-model="mySelect">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
</p>
</div>
</div>
<div class="tips">Tips: <a href="https://cn.vuejs.org/v2/guide/forms.html" target="_blank">关于表单输入绑定更多请点击</a></div>
</div>
body {
font-size: 14px;
}
h1 {
font-size: 32px;
font-weight: normal;
border-left: 3px solid #2795EE;
padding-left: 15px;
}
h2 {
font-size: 18px;
font-weight: normal;
border-left: 3px solid #2795EE;
margin: 0;
padding-left: 15px;
margin-left: 15px;
}
.panel {
margin: 20px 0;
}
.panel-content {
padding: 20px 30px;
border-bottom: 1px dashed #2795EE;
}
p {
margin: 10px 0;
}
input {
border: none;
background: none;
border-bottom: 1px solid #2795EE;
outline: none;
}
.tips {
border: 1px solid #e86565;
color: #e86565;
padding: 5px 20px;
text-align: center;
margin: 20px;
border-radius: 10px;
}