标签：输入 doc 数组 最全 name 结果 ref 界面 OLE
目录
v-model=‘变量‘变量值与表单标签的value相关
v-model 可以实现数据的双向绑定:
v-model绑定的变量值可以影响表单标签的值,反过来单标签的值也可以影响变量的值
<input type="text" v-model="v1"> {{ v1 }}可以控制单选框的属性选择
男<input type="radio" name="sex" value="male" v-model="v2">
女<input type="radio" name="sex" value="female" v-model="v2">
{{ v2 }}
data:{
v2:'male'
}使用true或false来控制单一复选框的选取
卖身契：同意 <input type="checkbox" name="agree" v-model="v3">
{{ v3 }}使用列表来控制多复选框的选择
男：<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']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>
<!-- 避免页面闪烁-->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>v-for=" "v-for=‘ele in string|array|obj‘
循环时重要的在前面
字符串
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>循环指令案例(留言板)
spliceunshift,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>前台数据库
保存的时候需要使用JSON进行序列化处理
存储到arr中
localStorage.arr=JSON.stringify([1,2,3]);
取值
console.log(JSON.parse(localStorage.arr));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>{{ num | fn }}{{ num | fn }}
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>computedcomputed :{
计算属性被渲染时调用
返回值是方法属性的值
}
弱类型语言,直接使用'+'来转换类型(字符串转整型)一般用来解决的问题:一个变量值与多个变量
<!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>watch监听属性不需要返回值
watch:{
fn(n,o){ // 当前的值,上一次的值
监听的属性每次更新都会回调监听方法
}
}
$data 就是找成员n是监听的属性当前值,o是其上一次的值,监听的属性每次更新都会回调监听方法
解决的问题,多个变量值依赖于一个变量值
<!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>标签：输入 doc 数组 最全 name 结果 ref 界面 OLE
原文地址：https://www.cnblogs.com/fwzzz/p/12057021.html
