Vue学习-模板语法
插值操作
Mustache语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h2>{{ message }}</h2>
<h2>{{ message }} + vue!</h2>
<h2>{{ firstName + lastName }}</h2>
<h2>{{ firstName + ' ' + lastName }}</h2>
<h2>{{ firstName }} {{ lastName }}</h2>
<h2>{{ counter * 2 }}</h2>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello',
firstName: 'a',
lastName: 'b',
counter: 100
}
})
</script>
</body>
</html>
v-once指令
数据初始化展示之后，后续模型变更，视图不再变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{ message }}</h2>
<h2 v-once>{{ message }}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello'
}
});
</script>
</body>
</html>
v-html指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{ url }}</h2>
<h2 v-html="url"></h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello',
url: '<a href="http://www.baidu.com">baidu</a>'
}
})
</script>
</body>
</html>
<a href="http://www.baidu.com">baidu</a>
baidu // 链接
v-text指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{ message }}, vue</h2>
<!-- 会覆盖掉, vue -->
<h2 v-text="message">, vue</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello'
}
})
</script>
</body>
</html>
hello, vue
hello
v-pre指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{ message }}</h2>
<!-- 原封不动的显示 -->
<h2 v-pre>{{ message }}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello'
}
})
</script>
</body>
</html>
hello
{{ message }}
v-cloak指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<h2>{{ message }}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
// 在vue解析之前，div中具有属性v-cloak
// 在vue解析之后，div中就没有属性v-cloak
setTimeout(function() {
const app = new Vue({
el: '#app',
data: {
message: 'hello'
}
})
}, 2000);
</script>
</body>
</html>
绑定属性
插值操作主要是将值插入到模板的内容中
但是，除了内容需要动态决定之外，某些属性我们也希望能够动态绑定
例如：
- 动态绑定a标签的href属性
- 动态绑定img标签的src属性
- 动态绑定样式
- 。。。
基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 无效 -->
<!-- <img src="{{ url }}" alt=""> -->
<!-- v-bind绑定 -->
<img v-bind:src="url" alt="">
<!-- 语法糖 -->
<img :src="url" alt="">
<a :href="href">baidu</a>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
url: 'https://cn.vuejs.org/images/logo.png',
href: 'http://www.baidu.com'
}
})
</script>
</body>
</html>
绑定样式：class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.active {
color: red;
}
</style>
</head>
<body>
<div id="app">
<h2 :class="active">{{ message }}</h2>
<!-- 对象语法 -->
<!-- 类会合并 title会继续保留 -->
<h2 class="title" v-bind:class="{ active: isActive, line: false }">{{ message }}</h2>
<h2 class="title" v-bind:class="getClasses()">{{ message }}</h2>
<button @click="isActive = !isActive">按钮</button>
<!-- 数组语法 -->
<!-- 作为字符串解析 -->
<h2 :class="['active', 'line']">{{ message }}</h2>
<!-- 作为变量解析 -->
<h2 :class="[active]">{{ message }}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello',
active: 'active',
isActive: true
},
methods: {
getClasses: function() {
return { active: this.isActive, line: false };
}
}
});
</script>
</body>
</html>
案例
点击列表中的哪一项，该项的字体变成红色，初始时，第一项为红色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.active {
color: red;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item, index) in movies" :class="{active: curIndex === index}" @click="curIndex = index">{{ item }}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
movies: ['1', '2', '3', '4', '5'],
curIndex: 0
}
});
</script>
</body>
</html>
绑定样式：style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 对象语法 -->
<h2 :style="messageStyle">{{ message }}</h2>
<!-- 数组语法 -->
<h2 :style="[baseBackgroundColor, baseFontSize]">{{ message }}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello',
// key可以不加'', value要加
messageStyle: {
fontSize: '50px',
color: 'red'
},
baseBackgroundColor: {
backgroundColor: 'green'
},
baseFontSize: {
fontSize: '40px'
}
}
});
</script>
</body>
</html>
计算属性
基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{ firstName + ' ' + lastName }}</h2>
<h2>{{ firstName }} {{ lastName }}</h2>
<h2>{{ getFullName() }}</h2>
<!-- 计算属性 -->
<h2>{{ fullName }}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'aaa',
lastName: 'bbb'
},
methods: {
getFullName() {
return this.firstName + ' ' + this.lastName;
}
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName;
}
}
})
</script>
</body>
</html>
复杂操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>总价格： {{ totalPrice }}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
books: [
{ id: 100, name: 'aaa', price: 110 },
{ id: 101, name: 'bbb', price: 111 },
{ id: 102, name: 'ccc', price: 112 }
]
},
computed: {
totalPrice() {
let total = 0;
this.books.forEach(item => {
total += item.price;
});
return total;
}
}
})
</script>
</body>
</html>
计算属性getter和setter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{ fullName }}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'aaa',
lastName: 'bbb'
},
computed: {
// 计算属性的简写
// fullName() {
// return this.firstName
// + ' ' + tis.lastName;
// }
// 计算属性的完整版
fullName: {
// set方法一般不用
// app.fullName = 'abc'; 这个时候会调用
set: function(newValue) {
console.log(newValue);
console.log('set function');
const names = newValue.split(' ');
this.firstName = names[0];
this.lastName = names[1];
},
get: function() {
// return 'abc'
return this.firstName + ' ' + this.lastName;
}
}
}
})
</script>
</body>
</html>
计算属性和methods的比较
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- methods -->
<h2>{{ getFullName() }}</h2>
<h2>{{ getFullName() }}</h2>
<h2>{{ getFullName() }}</h2>
<h2>{{ getFullName() }}</h2>
<!-- computed -->
<h2>{{ fullName }}</h2>
<h2>{{ fullName }}</h2>
<h2>{{ fullName }}</h2>
<h2>{{ fullName }}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'aaa',
lastName: 'bbb'
},
computed: {
fullName() {
console.log('fullName'); // 只打印一次，计算属性具有缓存，当计算属性依赖的数据（firstName, lastName）没有发生变化时，不会重新计算
return this.firstName + ' ' + lastName;
}
},
methods: {
getFullName() {
console.log('getFullName'); // 打印了四次，每次都重新计算
return this.firstName + ' ' + this.lastName;
}
}
})
</script>
</body>
</html>
事件监听
基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{ counter }}</h2>
<button v-on:click="increment()">+</button>
<button v-on:click="decrement()">-</button>
<!-- 语法糖写法 -->
<button @click="increment()">+</button>
<button @click="decrement()">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
counter: 0
},
methods: {
increment() {
this.counter++;
},
decrement() {
this.counter--;
}
}
})
</script>
</body>
</html>
传递参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 无参时可以省略括号 -->
<button @click="btnclick1()">按钮1</button>
<button @click="btnclick1">按钮1</button>
<!-- 需要参数的 -->
<button @click="btnclick2('abc')">按钮2</button>
<!-- 传参数为undefined -->
<button @click="btnclick2()">按钮2</button>
<!-- 会将浏览器产生的event事件对象作为参数传递 -->
<button @click="btnclick2">按钮2</button>
<!-- 在方法定义时，需要event对象，同时也需要其它参数
可以使用$event获取到event对象-->
<button @click="btnclick3(123, $event)">按钮3</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
},
methods: {
btnclick1() {
console.log('btnclick1');
},
btnclick2(abc) {
console.log('-----', abc);
},
btnclick3(abc, event) {
console.log(abc, event);
}
},
})
</script>
</body>
</html>
修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 点击按钮，会触发事件冒泡，触发divclick -->
<!-- 使用.stop修饰符可以阻止事件冒泡 -->
<div @click="divclick">
aaaa
<button @click.stop="btnclick">按钮</button>
</div>
<!-- .prevent修改符阻止默认事件 -->
<form action="baidu">
<input type="submit" value="提交" @click.prevent="submitclick()">
</form>
<!-- .keycode | keyAlias 只当事件是从特定键触发时才触发回调-->
<input type="text" @keyup.enter="keyupclick()">
<!-- .once修饰符 只触发一次 -->
<button @click.once="btn2click">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
},
methods: {
btnclick() {
console.log('btnclick');
},
divclick() {
console.log('divclick');
},
submitclick() {
console.log('submitclick')
},
keyupclick() {
console.log('keyupclick');
},
btn2click() {
console.log('btn2click');
}
}
})
</script>
</body>
</html>
条件判断
v-if、v-else、v-else-if的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2 v-if="isShow">{{ message }}</h2>
<h2 v-else>bye</h2>
<h2 v-if="score >= 90">优秀</h2>
<h2 v-else-if="score >= 80">良好</h2>
<h2 v-else-if="score >= 60">及格</h2>
<h2 v-else>不及格</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello',
isShow: true,
score: 100
}
})
</script>
</body>
</html>
用户登陆切换案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<span v-if="isUser">
<label for="username">用户账号</label>
<!-- 添加key使得不复用 -->
<input type="text" id="username" placeholder="用户账号" key="username">
</span>
<span v-else>
<label for="email">用户邮箱</label>
<input type="text" id="email" placeholder="用户邮箱" key="email">
</span>
<button @click="isUser = !isUser">切换类型</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
isUser: true
}
})
</script>
</body>
</html>
v-show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2 v-if="isShow">{{ message }}</h2>
<h2 v-show="isShow">{{ message }}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
isShow: true,
message: 'hello'
}
})
</script>
</body>
</html>
v-show和v-if的区别
- v-show只是控制元素的display: none；v-if则会创建和销毁dom中的元素
- 当元素显示需要频繁的切换和显示时，使用v-show
- 当只有一次切换时，使用v-if
循环遍历
遍历数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in names">{{ item }}</li>
</ul>
<ul>
<li v-for="(item, index) in names">
{{ index }} {{ item }}
</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
names: ['aaa', 'bbb', 'ccc']
}
})
</script>
</body>
</html>
遍历对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<!-- value -->
<li v-for="item in info">{{ item }}</li>
</ul>
<ul>
<li v-for="(value, key) in info">
{{ value }} {{ key }}
</li>
</ul>
<ul>
<li v-for="(value, key, index) in info">
{{ value }} {{ key }} {{ index }}
</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
info: {
name: 'xx',
age: 18,
height: 1.88
}
},
methods: {
}
})
</script>
</body>
</html>
key属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<!-- 不使用index -->
<!-- 绑定key来性能优化 -->
<li v-for="item in letters" :key="item">{{ item }}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
letters: ['a', 'b', 'c', 'd', 'e']
},
methods: {
}
})
</script>
</body>
</html>
数组中的哪些方法是响应式的？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in letters">{{ item }}</li>
<button @click="btnClick">按钮</button>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
letters: ['a', 'b', 'c', 'd', 'e']
},
methods: {
btnClick() {
// 1. push方法 响应式
// this.letters.push('aaa');
// 2. 通过索引值修改数组中的元素 非响应式，不会刷新界面
// this.letters[0] = 'aaa';
// 3. pop() 响应式
// this.letters.pop();
// 4. shift() 响应式
// this.letters.shift();
// 5. unshift() 响应式
// this.letters.unshift('aaa', 'bbb', 'ccc');
// 6. splice() 响应式
// 操作元素的开始位置， 删除元素的个数， 追加新的元素
// this.letters.splice(1, 2);
// 7. sort() 响应式
// this.letters.sort();
// 8. reverse() 响应式
// this.letters.reverse();
// 9. Vue.set()方法 响应式,可以解决（2）非响应式的问题
Vue.set(this.letters, 0, 'aaa');
}
}
})
</script>
</body>
</html>
阶段案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.table {
border: 1px solid #e9e9e9;
border-collapse: collapse;
border-spacing: 0;
}
th, td {
padding: 8px 16px;
border: 1px solid #e9e9e9;
text-align: left;
}
th {
background-color: #f7f7f7;
color: #5c6b77;
font-weight: 600;
}
</style>
</head>
<body>
<div id="app">
<div v-if="books.length">
<table>
<thead>
<tr>
<th></th>
<th>书籍名称</th>
<th>出版日期</th>
<th>价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in books" :key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.date }}</td>
<td>{{ item.price | showPrice }}</td>
<td>
<button @click="decrement(item)" v-bind:disabled="item.count <= 1">-</button>
{{ item.count }}
<button @click="increment(item)">+</button>
</td>
<td>
<button @click="removeBook(index)">移除</button>
</td>
</tr>
</tbody>
</table>
<h2>总价格： {{ totalPrice }}</h2>
</div>
<h2 v-else>
购物车为空！
</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
books: [
{ id: 1, name: 'aaa', date: '2006-01', price: 81.00, count: 1 },
{ id: 2, name: 'bbb', date: '2006-01', price: 95.00, count: 1 },
{ id: 3, name: 'ccc', date: '2006-01', price: 25.00, count: 1 },
{ id: 4, name: 'ddd', date: '2006-01', price: 15.00, count: 1 },
{ id: 5, name: 'eee', date: '2006-01', price: 95.00, count: 1 }
]
},
methods: {
decrement(item) {
if (item.count <= 0) return;
item.count--;
},
increment(item) {
item.count++;
},
removeBook(index) {
this.books.splice(index, 1);
}
},
filters: {
showPrice(price) {
return '¥' + price.toFixed(2);
}
},
computed: {
totalPrice() {
let totalPrice = 0;
for (let i = 0; i < this.books.length; i++) {
totalPrice += this.books[i].price * this.books[i].count;
}
return totalPrice;
}
}
})
</script>
</body>
</html>
Javascript高阶函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const nums = [10, 20, 111, 222, 444, 40, 50];
// 1. 取出所有小于100的数字
let newNums = [];
for (let n of nums) {
if (n < 100) {
newNums.push(n);
}
}
// 2. 将所有小于100的数字进行转化： 全部*2
// 3. 将乘以2的所有结果求和
const lessThan100 = nums.filter(item => {
return item < 100;
})
console.log(lessThan100); // [10, 20, 40, 50]
const doubleVaule = lessThan100.map(item => {
return item * 2;
});
console.log(doubleVaule); // [20, 40, 80, 100]
const sum = doubleVaule.reduce((preValue, value) => {
return preValue + value;
})
console.log(sum);
let total = nums.filter(item => {
return item < 100;
}).map(item => {
return item * 2;
}).reduce((preValue, value) => {
return preValue + value;
});
console.log(total);
</script>
</body>
</html>
v-model
基本使用-配合表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="message">
<h2>{{ message }}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello'
},
methods: {
}
})
</script>
</body>
</html>
v-model原理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- <input type="text" v-model="message"> -->
<input type="text" :value="message" @input="valueChange">
<h2>{{ message }}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello'
},
methods: {
valueChange(event) {
this.message = event.target.value;
}
}
})
</script>
</body>
</html>
v-model:radio
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<label for="male">
<input type="radio" id="male" name="sex" value="男" v-model="sex">男
</label>
<label for="female">
<input type="radio" id="female" name="sex" value="女" v-model="sex">女
</label>
<h2>你选择的性别： {{ sex }}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
sex: '男'
},
methods: {
}
})
</script>
</body>
</html
V-model:checkbox
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<label for="license">
<input type="checkbox" id="license" v-model="isAgree">同意协议
</label>
<h2>同意协议：{{ isAgree }}</h2>
<label for="">
<input type="checkbox" value="篮球" v-model="hobbies">篮球
<input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
<input type="checkbox" value="足球" v-model="hobbies">足球
<input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
</label>
<h2>你的爱好是： {{ hobbies }}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
isAgree: false,
hobbies: []
},
methods: {
}
})
</script>
</body>
</html>
v-model:select
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<select name="abc" v-model="fruit">
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="榴莲">榴莲</option>
<option value="葡萄">葡萄</option>
</select>
<h2>你选择的水果是： {{ fruit }}</h2>
<select name="def" v-model="fruits" multiple>
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="榴莲">榴莲</option>
<option value="葡萄">葡萄</option>
</select>
<h2>你选择的水果是： {{ fruits }}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
fruit: '苹果',
fruits: []
},
methods: {
}
})
</script>
</body>
</html>
值绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<label v-for="item in originHobbies" :for="item">
<input type="checkbox" :value="item" :id="item" v-model="hobbies"> {{item}}
</label>
<h2>你的爱好是： {{ hobbies }}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
isAgree: false,
hobbies: [],
originHobbies: ['篮球', '羽毛球', '乒乓球', '足球']
},
methods: {
}
})
</script>
</body>
</html>
修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- lazy: 失去焦点的时候再变量更新 -->
<input type="text" v-model.lazy="message">
<h2>{{ message }}</h2>
<!-- number：转为number类型 -->
<input type="number" v-model.number="age">
<!-- 原始的会显示string -->
<h2>{{ typeof age }}</h2>
<!-- trim: 删除左右两边的空格 -->
<input type="text" v-model.trim="name">
<h2>{{ name }}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello',
age: 18,
name: ''
},
methods: {
}
})
</script>
</body>
</html>
