vue 第九天 v-model的基本使用
1、v-model 的基本使用
<!-- v-model 表达式-->
<div id="vue_one">
<input type="text" v-model="message">
{
{
message}}
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#vue_one',
data: {
message:""
},
methods: {
delete1(index) {
this.book.splice(index, 1);
}
}
})
</script>
2、:value 与 @input 的基本使用
-
@input 如果 input 里的值发生变化就会调用@input之间 的方法
- value 拿到下面的数据
<!-- :value 与 @input-->
<div id="vue_one">
<input type="text" :value="message" @input="message1"> {
{message}}
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#vue_one', data: {message: ""}, methods: {
message1(event) {
this.message += event.data;
}
}
})
</script>
3、:value 与 v-model 的差别
vue 中 v-model = ：value + v-model
v-model 是双向绑定
双向绑定：就是数据和标签双向互关联，一方改动另一方随之改变
:value 只能配合 @input 进行双向绑定否则 单个value的话只能通过提交的数据进行绑定
4、相等
<input type = "text" v-model="message">
等同于
<input type="text" v-bind:value="message" v-on:input="message = $event.target.value ">
5、v-model 与 radio 的绑定
<!-- v-model -->
<div id="vue_one">
<input type="radio" v-model="sex" value="男">男
<input type="radio" v-model="sex" value="女">女
<h1>{
{
sex}}</h1>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#vue_one',
data: {
sex: "女"
}
})
</script>
6、 v-model 与 checkbox 的绑定
<!-- v-model -->
<div id="vue_one">
<input type="checkbox" v-model="hobbies" value="篮球">篮球
<input type="checkbox" v-model="hobbies" value="足球">足球
<input type="checkbox" v-model="hobbies" value="不知道">不知道
<h1>{
{
hobbies}}</h1>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#vue_one',
data: {
hobbies: []
}
})
</script>
7、v-model 与 select 的绑定
7.1、v-model 选择单个
<!-- v-model -->
<div id="vue_one">
<select name="abc" v-model="qwe" id="">
<option value="日本">日本</option>
<option value="美国">美国</option>
<option value="上海">上海</option>
</select>
<h1>{
{
qwe}}</h1>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#vue_one',
data: {
qwe: "上海"
}
})
</script>
7.2、v-model 选择多个 按 Ctrl 键选择多个
<!-- v-model -->
<div id="vue_one">
<select name="abc" v-model="qwe" multiple>
<option value="日本">日本</option>
<option value="美国">美国</option>
<option value="上海">上海</option>
</select>
<h1>{
{
qwe}}</h1>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#vue_one',
data: {
qwe: []
}
})
</script>
8、修饰符
8.1、lazy
可以让数据在失去焦点或者回车时才会更新
<!-- v-model -->
<div id="vue_one">
<input type="text" v-model.lazy="qwe">
<h1>{
{
qwe}}</h1>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#vue_one',
data: {
qwe: ""
}
})
</script>
8.2、number
让输入框中输入的数字类型 自动转化成数字类型
<!-- v-model -->
<div id="vue_one">
<input type="number" v-model.number="qwe">
<h1>{
{
qwe}}</h1>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#vue_one',
data: {
qwe: ""
}
})
</script>
8.3、trim
trim修饰符可以过滤内容左右两边的空格
<!-- v-model -->
<div id="vue_one">
<input type="text" v-model.trim="qwe">
<h1>{
{
qwe}}</h1>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#vue_one',
data: {
qwe: ""
}
})
</script>
9、过滤器 filters
过滤器就是过滤一些我们不需要的，给出我们需要的进行展示
<div id="div1">
<ul>
<li v-for="item in person">姓名：{
{
item.name}}------------年龄：{
{
item.age}}---------------身高：{
{
item.stature | filterStature}}</li>
</ul>
</div>
<script type="text/javascript">
// filters 过滤 过滤掉大部分的小数，保留两位小数
// toFixed js方法四舍五入过滤小数点
let vue = new Vue({
el: "#div1",
data: {
person: [
{
name: "张三",
age: 34,
stature: 176.789
}, {
name: "李四",
age: 15,
stature: 172.621
}, {
name: "马六",
age: 21,
stature: 180.5315
}
]
},
filters: {
filterStature(stature){
return stature.toFixed(2);
}
}
});
</script>
花开一千年,花落一千年,花叶永不见