1217 表单 循环 成员
目录
今日内 容
1.表单指令 v-model='变量'
1.1 数据的双向绑定
变量值与表单标签的value相关
v-model 可以实现数据的双向绑定:
v-model 绑定的变量值可以影响表单标签的值,反过来表单标签的值也可以影响变量的值
<input type="text" v-model="v1"> {{ v1 }}
1.2 单选框
可以控制单选框的属性选择
男<input type="radio" name="sex" value="male" v-model="v2">
女<input type="radio" name="sex" value="female" v-model="v2">
{{ v2 }}
data:{
v2:'male'
}
1.3 单一复选框
使用true或false来控制单一复选框的选取
卖身契:同意 <input type="checkbox" name="agree" v-model="v3">
{{ v3 }}
1.4 多复选框
使用列表来控制多复选框的选择
男:<input type="checkbox" name="hobbies" value="male" v-model="v4">
女:<input type="checkbox" name="hobbies" value="female" v-model="v4">
哇塞:<input type="checkbox" name="hobbies" value="other" v-model="v4">
{{ v4 }}
v4: ['male', 'female']
2. 斗篷指令
v-cloak属性
有vue属性的时候会直接被解析替换,没有vue环境时属性就是直接的属性{display: none; }
在style中写
[v-cloak] {display: none; }
给div 标签添加 v-cloak属性
--------------------------------------------------------
<style type="text/css">
[v-cloak] { display: none; }
</style>
<div id="app" v-cloak>
{{ msg }}
</div>
<script src="js/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
msg: "message"
}
})
</script>
<!-- 避免页面闪烁-->
3.条件指令 v-if='布尔变量'
使用true或false来控制类属性的样式显示
v-show='布尔变量'
隐藏时,采用display:none
进行渲染v-if='布尔变量'
隐藏时,不再页面中渲染(保证不渲染的数据泄露)
<div class="box r" v-show="is_show"></div>
<div class="box b" v-if="is_show"></div>
v-if='布尔变量' 家族
隐藏时,不在页面中渲染(保证不渲染的数据泄露)
v-if
v-else-if
v-else
利用条件判断来指定变换图片颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width: 200px;
height: 200px;
}
.r {background-color: red}
.b {background-color: blue}
.g {background-color: green}
.active {
background-color: deeppink;
}
</style>
</head>
<body>
<div id="wrap">
<div>
<button @click="page='r_page'">红</button>
<button @click="page='b_page'">蓝</button>
<button @click="page='g_page'">绿</button>
</div>
点击按钮高亮显示
--------------------------------------------------
<div>
<button @click="page='r_page'" :class="{active: page === 'r_page'}">红</button>
<button @click="page='b_page'" :class="{active: page === 'b_page'}">蓝</button>
<button @click="page='g_page'" :class="{active: page === 'g_page'}">绿</button>
</div>
------------------------------------------------
<div class="box r" v-if="page === 'r_page'"></div>
<div class="box b" v-else-if="page === 'b_page'"></div>
<div class="box g" v-else></div>
</div>
</body>
<script src="vue/vue.js"></script>
<script>
new Vue({
el:'#wrap',
data:{
page:'r_page'
}
})
</script>
</html>
4. 循环指令 v-for=" "
v-for='ele in string|array|obj'
循环时重要的在前面
- 字符串 文本在前,索引在后
- 数组 文本前,索引后
- 对象 value,key,索引
字符串
info: 'good good study',
普通
<i v-for="c in info">{{ c }} </i>
加索引
<i v-for="(c, i) in info">{{i}}:{{c}}<br></i>
数组
stus: ['Bob', 'Tom', 'Jerry'],
普通
<div v-for="e in stus">{{ e }}</div>
索引
<div v-for="(e, i) in stus">{{ i }}:{{ e }}</div>
对象
循环值value
<div v-for="v in people">{{ v }}</div>
获取v,k,索引
<div v-for="(v, k, i) in people">{{ i }} - {{ k }}:{{ v }}</div>
people: {
name: '猴子',
age: 36.7,
sex: '女',
},
嵌套使用
teas: [
{
name: 'jason',
age: 73,
sex: '男',
},
{
name: 'egon',
age: 74,
sex: '男',
},
{
name: 'owen',
age: 17.5,
sex: '男',
}
]
循环遍历的嵌套
<div v-for="tea in teas">
<span v-for="(v, k, i) in tea"><span v-if="i !== 0"> | </span>{{ k }}:{{ v }}</span>
</div>
循环指令案例(留言板)
数组操作splice
-
unshift,push
首尾增 -
shift,pop
首尾删 -
数组操作最全方法
: splice(begin_index,count,...args)
从第begin_index位开始操作第count位,值是...args
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li:hover {
color: red;
/*鼠标样式*/
cursor: pointer;
}
</style>
</head>
<body>
<div id="app">
<input type="text" v-model="comment">
<button type="button" @click="send_msg">留言</button>
<!--留言板界面-->
<ul>
<!--根据遍历的索引本身删除留言数据-->
<li v-for="(msg,i) in msgs" @click="delete_msg(i)">{{ msg }}</li>
</ul>
</div>
</body>
<script src="vue/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
comment:'',
// 对数据库中的留言进行判断
msgs:localStorage.msgs ? JSON.parse(localStorage.msgs) : [],
},
methods:{
send_msg() {
// 将comment添加到留言msgs数组中
// unshift,push 首尾增 / shift,pop 首尾删
// this.msgs.push(this.comment)
// 判断是否留言是否为空
if (!this.comment) {
alert('请输入内容');
return false;
}
// 将留言添加到数组
this.msgs.push(this.comment);
// 将输入的内容清空
this.comment = '';
// 持久化 同步数据库
localStorage.msgs = JSON.stringify(this.msgs);
},
// 删除留言
delete_msg(index){
// 从index开始删除1位
this.msgs.splice(index,1);
// 同步数据库
localStorage.msgs = JSON.stringify(this.msgs);
}
}
})
// localStorage.arr=JSON.stringify([1,2,3]);
// console.log(JSON.parse(localStorage.arr));
</script>
</html>
数据库
前台数据库
- localStorage 永久存储
- sessionStorage 临时存储(所属页面标签关闭后清空)
保存的时候需要使用JSON进行序列化处理
存储到arr中
localStorage.arr=JSON.stringify([1,2,3]);
取值
console.log(JSON.parse(localStorage.arr));
5. 成员
5.1 分隔符成员 delimiters:["",""]
修改插值表达式符号
delimiters:["[{","}]"]
会将插值表达语法重新设置
----------------------------------------------
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
{{ msg }}
[{ msg }]
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: 'message'
},
delimiters: ['[{', '}]'], // 修改插值表达式符号
})
</script>
</html>
5.2 过滤器成员 {{ num | fn }}
{{ num | fn }}
filters:{
// 传入所有要过滤的条件,返回值就是过滤的结果
}
- 在filters成员中定义过滤器方法
- 可以对多个值进行过滤,过滤时还可以额外传入辅助参数
- 过滤的结果可以在进行下一次过滤(过滤的串联)
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>过滤器</title>
</head>
<body>
<div id="app">
<!--
总结:
1、在filters成员中定义过滤器方法
2、可以对多个值进行过滤,过滤时还可以额外传入辅助参数
3、过滤的结果可以再进行下一次过滤(过滤的串联)
-->
<p>{{ num | f1 }}</p>
<p>{{ a, b | f2(30, 40) | f3 }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
num: 10,
a: 10,
b: 20,
},
filters: {
// 传入所有要过滤的条件,返回值就是过滤的结果
f1 (num) {
console.log(num);
return num * 10;
},
f2 (a, b, c, d) {
console.log(a, b, c, d);
return a + b + c + d;
},
f3 (num) {
return num * num;
}
}
})
</script>
</html>
5.3 计算属性成员 computed
computed :{
计算属性被渲染时调用
返回值是方法属性的值
}
弱类型语言,直接使用'+'来转换类型(字符串转整型)
- computed 计算属性可以声明:方法属性(方法属性一定不要在data中重复声明)
- 方法属性必须渲染才会调用绑定的方法,方法属性的值就是绑定方法的返回值
- 绑定方法中出现的所有的变量都会被监听,任何一个变化发生值更新都会重新触发绑定方法,从而更新方法属性的值
一般用来解决的问题:一个变量值与多个变量
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<input type="number" min="0" max="100" v-model="n1">
+
<input type="number" min="0" max="100" v-model="n2">
=
<button>{{ result }}</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
n1: '',
n2: '',
// result: 0,
},
/**
* 总结:
* 1、computed计算属性可以声明 方法属性(方法属性一定不能在data中重复声明)
* 2、方法属性 必须在页面中渲染,才会启用绑定的方法,方法属性的值就是绑定方法的返回值
* 3、绑定的方法中出现的所有变量都会被监听,任何一个变化发生值更新都会重新触发绑定方法,从而更新方法属性的值
*
* 一般用来解决的问题:一个变量值依赖于多个变量
*/
computed: {
result () {
console.log('被调用了');
n1 = +this.n1;
n2 = +this.n2;
return n1 + n2;
}
}
})
</script>
</html>
5.4 监听属性watch
监听属性不需要返回值
watch:{
fn(n,o){ // 当前的值,上一次的值
监听的属性每次更新都会回调监听方法
}
}
$data 就是找成员
n是监听的属性当前值,o是其上一次的值,监听的属性每次更新都会回调监听方法
- 监听的属性需要在data中声明,监听的方法不需要返回值
- 监听的方法名就是监听的属性名,该属性值发生更新时就会回调监听方法
- 监听方法有两个回调参数:当前值,上一次的值
解决的问题,多个变量值依赖于一个变量
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<p>姓名:<input type="text" v-model="full_name"></p>
<p>姓:{{ first_name }}</p>
<p>名:{{ last_name }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
full_name: '',
first_name: '未知',
last_name: '未知',
},
watch: {
// n是监听的属性当前值,o是其上一次的值,监听的属性值每次更新都会回调监听方法
/**
* 总结:
* 1、监听的属性需要在data中声明,监听方法不需要返回值
* 2、监听的方法名就是监听的属性名,该属性值发生更新时就会回调监听方法
* 3、监听方法有两个回调参数:当前值,上一次值
*
* 解决的问题:多个变量值依赖于一个变量值
*/
full_name(n, o) {
name_arr = n.split('');
this.first_name = name_arr[0];
this.last_name = name_arr[1];
},
}
})
</script>
</html>
冒泡排序
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
}
})
</script>
<script>
let arr = [3, 2, 5, 4, 1];
console.log(arr);
// 冒泡排序
// 3, 2, 5, 4, 1
// 2, 3, 4, 1, 5
// 2, 3, 1, 4
// 2, 1, 3
// 1, 2
for (let i = 0; i < arr.length - 1; i++) { // 外层循环控制趟数
for (let j = 0; j < arr.length - 1 - i; j++) { // 内存循环控制比较次数
if (arr[j] > arr[j + 1]) {
let temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
console.log(arr);
stus = [
{
name: 'Bob',
grade: 98
},
{
name: 'Tom',
grade: 87
},
{
name: 'Jerry',
grade: 92
},
];
// 按照分数进行排名
for (let i=0; i<stus.length-1; i++) {
for (let j=0; j<stus.length-1-i; j++) {
// 处理条件即可
if (stus[j].grade > stus[j + 1].grade) {
let temp = stus[j];
stus[j] = stus[j + 1];
stus[j + 1] = temp;
}
}
}
console.log(stus);
</script>
</html>
课堂内容
## 表单指令
```
v-model="变量" 变量与value有关
普通:变量就代表value值
单选框:变量为多个单选框中的某一个value值
单一复选框:变量为布尔,代表是否选中
多复选框:变量为数组,存放选中的选项value
```
## 条件指令
```
v-show display:none
v-if 不渲染
v-if | v-else-if | v-else
```
## 循环指令
````
v-for="(vi) in str|arr"
v-for="(v,k,i) in dic"
````
## 变量
```
sessionStorage
localStorage
```
## 分隔符
```
delimiters:["",""]
可以修改符号
```
## 过滤器
```
{{ n1,n2 | f1(20) | f2 }}
filters:{
f1(n1,n2,n3){ return }
}
```
## 计算属性
```
computed:{
result(){
// 一个方法属性值依赖于多个变量
}
}
```
## 监听属性
````
watch:{
full_name(n,o){
this.first_name = n.split('')[0]
}
}
````
作业
作业1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<table>
<tr>
<th>排名</th>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
<th>总分</th>
</tr>
<!--这是列表内容-->
<tr v-for="(s,i) in scores">
<td>{{ i+1 }}</td>
<td v-for="(v,k) in s">{{ v }}</td>
</tr>
</table>
</div >
</body>
<script src="vue/vue.js"></script>
<script>
let scores = [
{ name: 'Bob', math: 97, chinese: 89, english: 67 },
{ name: 'Tom', math: 67, chinese: 52, english: 98 },
{ name: 'Jerry', math: 72, chinese: 87, english: 89 },
{ name: 'Ben', math: 92, chinese: 87, english: 59 },
{ name: 'Chan', math: 47, chinese: 85, english: 92 },
];
let all_s = [];
// 给列表中的每个字典赋值总分属性
for( s of scores){
// 添加总分属性
s.all_sco = s.math + s.chinese + s.english;
// 重新获得列表套字典数据(多了总分)
all_s.push(s);
}
// 根据总分冒泡排序
for (let i =0;i<all_s.length-1;i++){
for (let j=0; j<all_s.length-1-i;j++){
if (all_s[j].all_sco< all_s[j+1].all_sco){
let t= all_s[j];
all_s[j] = all_s[j+1];
all_s[j+1]=t
}
}
}
new Vue({
el:'#app',
data:{
scores:all_s
}
});
</script>
</html>
作业2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<table>
<tr>
<th>排名</th>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
<th>总分</th>
</tr>
<!--这是列表内容-->
<tr v-for="(s,i) in scores" v-if="s.math>=60 & s.chinese>=60 & s.english>=60">
<td>{{ i+1 }}</td>
<td v-for="(v,k) in s">{{ v }}</td>
</tr>
</table>
</div >
</body>
<script src="vue/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
scores:[
{ name: 'Bob', math: 97, chinese: 89, english: 67 },
{ name: 'Tom', math: 67, chinese: 52, english: 98 },
{ name: 'Jerry', math: 72, chinese: 87, english: 89 },
{ name: 'Ben', math: 92, chinese: 87, english: 59 },
{ name: 'Chan', math: 47, chinese: 85, english: 92 },
]
}
});
</script>
</html>