1 双向数据绑定指令
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div id="app">
<p>用户名：{{username}}p>
<input type="text" v-model="username">
<hr>
<input type="text" value="abc">
<input type="text" :value="username">
<hr>
<select v-model="city">
<option value="">---请选择---option>
<option value="1">北京option>
<option value="2">上海option>
<option value="3">广州option>
<option value="4">深圳option>
select>
div>
<script src="./lib/vue-2.6.12.js">script>
<script>
const vm = new Vue({
el: '#app',
data: {
username: 'zhangsan',
city: '2', //默认值设为2
}
})
script>
body>
html>
2 v-model指令的专属修饰符
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div id="app">
<input type="text" v-model="n1">
+ <input type="text" v-model="n2">
= <span>{{ n1 + n2 }}span>
<hr>
<input type="text" v-model.number="n3">
+ <input type="text" v-model.number="n4">
= <span>{{ n3 + n4 }}span>
<hr>
<input type="text" v-model="username">
<button @click="showName1">获取用户名button>
<hr>
<input type="text" v-model.trim="username2">
<button @click="showName2">获取用户名button>
<hr>
<input type="text" v-model="username">
<input type="text" v-model.lazy="username">
div>
<script src="./lib/vue-2.6.12.js">script>
<script>
const vm = new Vue({
el: '#app',
data: {
username: 'zhangsan',
n1: 1,
n2: 2,
n3: 1,
n4: 2,
username2: 'lisi',
},
methods: {
showName1(){
console.log(`用户名是："${this.username}"`)
},
showName2(){
console.log(`用户名是："${this.username2}"`)
},
},
})
script>
body>
html>