<template>
<div>
<div class="col">
<input type="text" v-model="message" placeholder="请输入..."/> <br/>
<p>输入的内容是: {{message}}</p>
</div>
<div class="col">
<textarea v-model="text" placeholder="输入...."></textarea>
</div>
<!--
使用v-model,表单控件显示的值只依赖所绑定的数据,不在关心初始化时的value属性,使用v-model时如果有中文输入法
输入中文时一般没有选中词, Vue时不会更新数据的,当敲下汉字时才会触发更新。如果希望总时实时更新,可以用@input来代替v-model.
-->
<div class="col">
<input type="text" @input="handleInput" placeholder="请输入..." />
<p>输入的内容是:</p>
<p style="white-space: pre">{{text}}</p>
</div>
<!-- 单选按钮 单独使用直接v-bind -->
<div class="col">
单独使用按钮:
<input type="radio" :checked="picked" /><br>
<p>您的性别是:{{picked}}</p>
</div>
<!-- 单选按钮, 如果是互斥选择的效果, 就需要使用v-model配合value来使用 -->
<div class="col">
<label>性别:</label>
<input type="radio" v-model="picked" value="女" id="sex"/> <label for="sex">女</label><br>
<input type="radio" v-model="picked" value="男" id="man" /> <label for="man">男</label><br>
<p>您的性别是:{{picked}}</p>
</div>
<!-- 复选框 单独使用 v-model 绑定一个布尔类型的值 -->
<div class="col">
<label for="pwd">是否记住密码:</label>
<input type="checkbox" v-model="picked" id="pwd"/>
<p>您的性别是:{{picked}}</p>
</div>
<!-- 复选框多选, 多个勾选都绑定到同一个数组类型的数据上 -->
<div class="col">
<input type="checkbox" v-model="checkedArray" value="小说" id="novel"/><label for="novel">HTML</label>
<input type="checkbox" v-model="checkedArray" value="IT" id="it"/><label for="novel">IT</label>
<input type="checkbox" v-model="checkedArray" value="美女" id="girl" /><label for="novel">美女</label>
<p>请选择爱好:{{checkedArray}}</p>
</div>
<!--
选择列表:(单选)
option是备选项,如果含有value的值就会优先匹配value的值,如果没有就会直接匹配option的text,
-->
<div class="col">
<select v-model="selected">
<option>html</option>
<option value="js">JavaScript</option>
<option value="java">Java</option>
</select>
<p>您选择的项目是:{{selected}}</p>
</div>
<!-- 选择列表(多选):
给<select>添加multiple属性
-->
<div class="col">
<select v-model="courses" multiple>
<option value="Math">Math</option>
<option value="English">English</option>
<option value="Chinese">Chinese</option>
</select>
<p>您选择的课程是:{{courses}}</p>
</div>
<!--
动态输出<option>
虽然选择列表<select>控件可以很简单的完成下拉选择的需求,但在实际业务中反而不常用,因为样式依赖平台和浏览器,无法统一,也不太美观。
功能受限,不支持搜索, 所以常见的解决方案是用div模拟一个类似的控件。
-->
<div>
<select v-model="selectedGame" multiple>
<option v-for="game in games" :value="game.value">
{{game.text}}
</option>
</select>
<p>您选择的项目是:{{selectedGame}}</p>
</div>
<!--
绑定值, 单选、复选框、下拉列表在单独使用的模式下, v-model绑定的值是一个静态字符串或者布尔值, 但在业务中有时需要绑定一个动态的数据
可以使用v-bind来实现
-->
<div>
<input type="radio" v-model="picked" :value="value"/>
<label>单选按钮</label>
<P>{{picked}}</P>
</div>
<!-- 复选框 动态绑定值 -->
<div>
<input type="checkbox" v-model="toggle"
:true-value="value1"
:false-value="value2"
/>
<label>复选按钮</label>
<P>{{toggle}}</P>
</div>
<!--
修饰符
.lazy 在输入框时 v-model默认是在input事件中同步输入框的数据,使用修饰符.lazy会转变为在change事件中同步,
message并不是实时改变的,而是在失去焦点或者按回车的时候才会更新
-->
<input type="text" v-model.lazy="message" />
<p>输入的内容:{{message}}</p>
<!-- 使用修饰符.number 可以将输入转换为Number类型,否则虽然你输入的数字,但它的类型其实是String,在数字输入框时会比较有用 -->
<input type="text" v-model.number="numberText"/>
<p>输入的内容:{{ typeof numberText}}</p>
<!-- 使用修饰符.trim 可以自动过滤输入的首尾空格 -->
<input type="text" v-model.trim="trimText"/>
<p>输入的内容:{{trimText}}</p>
<p>内容长度:{{trimText.length}}</p>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
message: '',
text: '',
picked: true,
value: '123',
checkedArray: [],
selected: '',
courses: [],
selectedGame: [],
toggle: false,
value: '教徒',
value1: "秦时明月",
value2: "大唐风月",
numberText: '',
trimText: '',
games: [
{value: 'CF', text: "穿越火线"},
{value: 'LOL', text: "英雄联盟"},
{value: 'NZ', text: "逆战"},
{value: 'CS', text: "反恐精英"}
]
}
},
methods: {
handleInput: function (e) {
this.text = e.target.value;
}
}
}
</script>
<style scoped>
input[type=text] {
width: 350px;
height: 30px;
padding-left: 15px;
}
textarea {
width: 340px;
height: 60px;
padding: 15px;
}
input[type=radio] {
width: 20px;
height: 20px;
margin-bottom: 10px;
}
.col {
width: 500px;
margin: 0 auto;
}
</style>