一.插入html片段 v-html v-text
<body>
<div id="app">
<h1>{{a}}</h1>
<div v-txt="msg">
原本内容
</div>
<div v-html="msg">
原本内容
</div>
<div>
原本内容{{msg}}，最后
</div>
</div>
<script>
//挂载
new Vue({
el: '#app',
data: {
a: '你好！',
msg: '<h3>3333333<h3>'
},
})
</script>
</body>二.简单表格 v-model
<body>
<div id="app">
<h1>{{a}}</h1>
<button @click="msg = '你好'">修改内容</button>
<!-- 输入内容 -->
<!-- v-model获取选中的value值 v-model一般用于表单元素 双向绑定-->
<!-- v-model.lazy 不是即使反应数据，要等回车键或光标离开才会显示数据 -->
<input type="text" v-model.lazy="msg">
<!-- v-model.number 把字符转为numbe数字 -->
<!-- v-model.trim 屏蔽空格 -->
<input type="text" v-model.trim="msg">
<p>{{msg.length}}</p>
<!-- 下拉框 -->
<!-- v-model获得选中的value值 -->
<select v-model="fruit">
<option value="apple">苹果</option>
<option value="orange">橘子</option>
<option value="banana">香蕉</option>
</select>
<!-- 复选框：只有选中和未选中两种状态 -->
<!-- v-model只有true或false -->
<input type="checkbox" v-model="chk">
<!-- 单选框 -->
<span>请选择一种语言:{{ language }}</span> <br>
<select v-model="language">
<option>python</option>
<option>javascript</option>
<option>C++</option>
</select>
<!-- 复选框 -->
<span>请选择一种语言:{{ language1 }}</span> <br>
<select v-model="language" multiple>
<option>python</option>
<option>javascript</option>
<option>C++</option>
</select>
<!-- 文本框 -->
<textarea v-model="comm" cols="50" rows="10" placeholder=请输入 "></textarea>
<p style="white-space:pre-line; ">{{comm}}</p>
<script>
// 挂载
new Vue({
el: '#app',
data: {
a: '你好',
msg: '',
fruit: '',
chk: true,
language: '',
language1: '',
comm:''
},
// watch: { // msg() { // console.log(typeof(this.msg)) // } // }
})
</script>
</body>输入文本框的绑定
<body>
<div id="app">
<input type="text" v-model="name" placeholder="请输入用户">
<p>{{name}} 您好！</p>
<!-- 文本框 -->
文本输入：<input type="text"> <br>
<!-- type="password”(类型=密码)密码输入框,用于输入密码，显示***。-->
输入密码:<input type="password"> <br>
<!-- type="file"(类型=文件)上传文件处,用于文件的选择和上传。-->
选择文件:<input type="file"> <br>
<!-- type="checkbox"(类型=复选框)用于某项选择的打开或关闭。-->
反复选择:<input type="checkbox"> <br>
<!-- type="radio”(类型=发送) 只能选择一次-->
唯一选择:<input type="radio"> <br>
<!-- type="image”(类型=图片) 将图片定义为提交按钮-->
图片提交:<input type="image" src="/img/1.jpg" class="tu"> <br>
<!-- type="submit"(类型=提交)专门用于提交表单的button按钮-->
提交按钮:<input type="submit"> <br>
<!-- type="month”(类型=月份) 定义year(年)和month(月)-->
选择月份<input type="month"><br>
<!-- type="number”(类型=数字) 只能选择/输入数字-->
选择数字<input type="number"> <br>
<!-- type="time" (类型=时间)定义分秒-->
选择时间<input type="time"> <br>
<!-- type="week"(类型=周)定义年月周-->
选择周:<input type="week">
</div>
<script>
new Vue({
el: '#app',
data: {
name: '',
},
})
</script>
</body>三.事件
(107条消息) vue事件（键盘事件，鼠标事件，输入事件）事件冒泡和捕获_vue鼠标事件_cn33333的博客-CSDN博客
<body>
<div id="app">
<!-- 但点击这个按钮，就调用fn1函数 -->
<button v-on:click="fn1">点我</button>
<!-- 当双击这个按钮，就调用fn1函数 -->
<button v-on:dblclick="fn1">双击</button>
<!-- 当移入这个按钮，就调用fn2函数 -->
<button v-on:mouseenter="fn2">移入</button>
<!-- 简写形式：把v-on：改成@就是简写形式 -->
<h4>以下是简写</h4>
<hr>
<!-- 但点击这个按钮，就调用fn1函数 -->
<button @click="fn1">点我</button>
<!-- 当双击这个按钮，就调用fn1函数 -->
<button @dblclick="fn1">双击</button>
<!-- 当移入这个按钮，就调用fn2函数 -->
<button @mouseenter="fn2">移入</button>
<br>
<hr>
<!-- 焦点事件：在元素获取或失去焦点触发的事件 -->
<input @focus="fu">
<input @blur="fu1">
<hr>
<br>
<!-- 鼠标滚动事件 -->
<div @mousewheel="fi" style="height: 500px;"></div>
<hr>
<br>
<!--
- change：变更 @change
输入框里面内容发生改变且失去焦点时触发
- input：实时变化 @input
输入框里面内容发生改变（且不用失去焦点）时触发
-->
<!-- 输入事件 -->
<input @change="fi1">
<input @input="fi1">
<hr>
<br>
<!-- @keydown（键盘按下时触发）
@keyup(键盘弹起)
@keypress(键盘按住时触发) -->
<!-- 按下键盘获取按下那个按钮 -->
<input @keyup="fi3" type="text">
</div>
<script>
// 【事件】
// JavaScript中的事件，可以理解就是在HTML文档或者浏览器中发生的一种交互操作，使得网页具备互动性。// 常见的有加载事件、鼠标事件。
// 【事件流】
// 由于DOM是一个树结构，如果在父子节点绑定事件时候，当触发子节点的时候，就存在一个顺序问题,这就涉及到了事件流。// 页面触发一个事件时,会按照一定的顺序来响应事件,事件的响应过程为事件流。
// 【js的事件流三阶段】
// 事件捕捉阶段(capture phrase):事件开始由顶层对象触发,然后逐级向下传播,直到目标元素;1/ 处于目标阶段(target phrase):处于绑定事件的元素上;
// 事件冒泡阶段(bubbling phrase):事件由具体的元素先接收,然后逐级向上传播,直到不具体的元素;//(事件捕获是从上到下,而事件冒泡,是从下到上。)
new Vue({
el: '#app',
methods: {
fn1() {
alert('点击')
},
fn2() {
alert('碰我干嘛')
},
fu() {
console.log('获取焦点')
},
fu1() {
alert('失去焦点')
},
fi() {
console.log('鼠标滚动了')
},
fi1() {
console.log('内容变更了')
},
fi3(e) {
console.log(e.key, e.keyCode)
}
},
// 【事件方法】
// @click: 当单击元素时,
// 发生click事件。
// @dbclick: 当双击元素时,
// 发生dbclick事件。 @focus: 当元素获得焦点时,
// 发生focus事件。 @blur: 当元素失去焦点时发生blur事件。 @submit: 当提交表单时,
// 发生submit事件。
// @keydown: 当键盘被按下时,
// 发生keydown事件。 @keyup: 当键盘被松开,
// 发生keyups事件。
// @mouse enter: 当鼠标指针穿过(进入) 被选元素时,
// 会发生mousedown事件。
// @mouse down: 当鼠标指针移动到元素上方,
// 并按下鼠标左键,
// 会发生mousedown事件。 @mouse leave: 当鼠标离开被选元素时,
// 会发生mouseleave事件。
// @mouse move: 当鼠标指针在指定的元素中移动时， 会发生 mousemove 事件。
// @mouse out: 在鼠标指针离开被选元素或任意子元素时都会被触发。
// @mouse over: 当鼠标指针位于元素上方时， 会发生 mouseover 事件。
// @mouse up: 当鼠标指针移动到元素上方， 并松开鼠标左键时， 会发生 mouseup 事件。
})
</script>
</body>事件冒泡与事件捕获
<body>
<div id="app">
<!-- 事件冒泡 -->
<div @click="fn1">外层
<div @click="fn2">
<div @click="fn3">事件冒泡</div>
</div>
</div>
<br>
<hr>
<!-- 事件捕获 -->
<div @click=" fn4 "> 捕获事件
<ul @click="fn5"></ul>
</div>
</div>
<script>
// 事件冒泡和事件捕获分别由微软和网景公司提出, 是为了解决页面中事件流(事件发生顺序) 的问题。
// 事件冒泡:
//:微软提出了名为事件冒泡(event bubbling)的事件流。
// 事件冒泡可以形象的比喻成把一颗石头投入水中, 泡泡会一直从水底冒出水面。 // 也就是说,事件会从最内层的元素开始发生,一直向上传播,直到document对象。
// 因此在事件冒泡的概念下在button按钮发生click事件的顺序应该是button→ div→ body→ html→ document.
// 事件捕获:
// 网景提出另一种事件流名为事件捕获(event capturing)。// 与事件冒泡相反,事件会从最外层开始发生,直到具体的元素。
// 因此在事件捕获的概念下在button按钮发生click事件的顺序应该是document→ html→ body→ div→ button
// 后来W3C采用折中的方式, 平息了网景和微软之间的战争, 制定了统一的标准 - 先捕获再冒泡。
new Vue({
el: '#app',
methods: {
fn1() {
console.log('div外层')
},
fn2() {
console.log('中层')
},
fn3() {
console.log('里层')
},
fn4() {
console.log('div外层')
},
fn5() {
console.log('div里层')
},
},
})
</script>
</body>on事件
<body>
<div id="app">
<!-- 鼠标单击事件 -->
<button v-on:click="show">按钮</button>
<!-- 鼠标双击事件 v-on 简写形式 @ -->
<button @dblclick="show">双击8888</button>
<!-- 鼠标移入事件 -->
<button @mouseenter="show">点击</button>
<!-- 转跳事件 -->
<a href="https://www.baidu.com">转跳</a>
<!-- v-bing 的简写 ： -->
<a :href="url">转跳</a>
<button @click="change" target="_blank">修改地址跳转</button>
</div>
<script>
new Vue({
el: '#app',
data: {
url: 'https://www.baidu.com'
},
// 事件
methods: {
show() {
alert('沙傻')
},
change() {
this.url = 'https://www.taobao.com/'
}
},
})
</script>
</body>四.数据绑定 v-bing
(107条消息) v-bind绑定事件_cn33333的博客-CSDN博客
<body>
<div id="app">
<!-- 数据双向绑定 -->
<a v-bind="url"></a>
<a :href="url">转跳</a>
<button @click="change" target="_blank">修改地址跳转</button>
<br>
<hr>
<br>
<div style="color: red; font-size: 24px;">div1</div>
<!--把样式属性改成对象属性：
1.要用大括号包裹起来；
2. 把样式转换成属性值，用引号引起来；
3.把分号改成逗号；
4.对象要用驼峰命名法-->
<!-- 代表样式color没有写死，而是根据变量color的值来，变量color是什么，样式color就是什么。 -->
<div :style="stylee">div2</div>
<br>
<hr>
<br>
<!-- 可以控制属性名添加 -->
<div class="box" :class="{bg:isBg}"></div>
<button @click="beiji">点击换背景</button>
</div>
<script>
new Vue({
el: "#app",
data: {
url: 'https://www.baidu.com',
stylee: {
color: 'red',
fontSize: '24px',
},
isBg: false,
},
// 事件
methods: {
change() {
this.url = 'https://www.taobao.com/'
},
beiji() {
if (this.isBg == false) {
this.isBg = true;
} else {
this.isBg = false;
}
}
},
})
</script>
</body>五.遍历 v-for
<!-- v-for遍历
v-for=“（值，索引）in 遍历对象”
-->
<body>
<div id="app">
<button @click="lies" style="margin-left: 25px;">在最后添加一个</button>
<ul>
<!-- 遍历数组 -->
<li v-for="(item,index) in list ">{{item}}---{{index}}</li>
</ul>
<hr>
<ul>
<!-- 遍历对象 -->
<li v-for="(item,index) in oqz ">{{item}} ----{{index}} </li>
</ul>
<hr>
<ul>
<!-- 遍历数字 从1开始 -->
<li v-for="num in 10">{{num}}</li>
</ul>
<hr>
<button @click="lies2">添加</button>
<ul>
<li v-for="item in list3 " :key="item.id">
<input type="checkbox">
<span>{{item.name}}</span>
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
list: [
"张三", "李四", "王五", "李六"
],
list2: [
"小七", "王八", "小久", "小花"
],
a: 0,
oqz: {
name: "小七",
age: 1,
sex: "女"
},
list3: [{
id: 1,
name: "张三"
}, {
id: 2,
name: "李四"
}, {
id: 3,
name: "王五"
}, ]
},
methods: {
lies() {
this.list.push(this.list2[this.a]);
this.a++;
if (this.a == 4) {
this.a = 0;
}
},
lies2() {
this.list3.splice(1, 0, {
id: 4,
name: '赵六'
});
}
}
})
</script>
</body>六.标签显示与隐藏 v-show
<body>
<div id="app">
<h1>{{a}}</h1>
<!-- v-show和 v-if 都可以用来控制标签显示与隐藏
当布尔值 为 true 显示 false 隐藏 -->
<div v-show="to">show</div>
<div v-if="true"> v-if</div>
<hr>
<a>输入有多少钱</a>
<input type="text" v-model="money">
<div v-if="money <= 100">只有{{money}}元穷逼</div>
<div v-else-if="money <= 500">{{money}}元小康</div>
<div v-else>真有钱</div>
<hr>
<a>输入年龄</a>
<input type="text" v-model="age">
<div v-if="age<=10">回家喝奶吧</div>
<div v-else>努力学习吧</div>
</div>
<script>
//挂载
new Vue({
el: '#app',
data: {
a: '你好！',
to: false,
money: 0,
age: 0
},
})
</script>
</body>七.生命周期
<body>
<div id="app">{{massage}}</div>
<script>
new Vue({
el: '#app',
data: {
massage: 'match'
},
// 初始化: 生命周期，事件，但数据代理还未开始
// |
beforeCreate() { // 此时不能通过vm访问到dete中的数据，mounted中的方法
console.log('beforeCreate')
},
// 初始化: 数据监测。数据代理
// |
created() { // 此时能通过vm访问到dete中的数据，mounted中的方法
console.log('created')
// debugger; 断点 刷新后
},
// 开始解析模板，生成虚拟DOM，页面还不能显示解析好的内容
// |
beforeMount() { //页面呈现未经编译的DOM结构
console.log('beforeMount')
},
//虚拟DOM转为 真实DOM插入画面
// |
mounted() { //页面呈现实经过Vue编译的DOM 初始化过程结束
// Vue完成模板的解释式并把初始的真实的DOM元素放入页面后（挂载完毕）调用 mounted
console.log(' mounted')
},
// 更新
// 数据是新的，但页面时旧的，即页面与数据尚未同步
biforeUpdate() {
console.log('biforeUpdate')
},
//页面与数据保持同步了
updated() {
console.log('updated')
},
//销毁
//vs销毁但工作成果还在
beforeDestroy() { //销毁之前 还可以访问变量，方法 但无法更新
console.log('beforeDestroy')
this.$destroy();
},
destroyed() { //销毁完成
console.log('destroyed')
},
})
</script>
</body>
八.监听器
(107条消息) Vue 侦听器（watch）_cn33333的博客-CSDN博客
<!-- 【侦听器】
作用：用来侦听数据有没有变化。一旦有变化就调用函数
语法：在和data，menthods这些平级的位置写一个watch -->
<!--
【对数组进行侦听】
数组是引用类型,存在比较复杂的侦听规则。
从理论上说，修改一个数组的内容，比如修改数组中某个元素的值,或者给数组添加新的元素,都不会修改数组本身的地址
为此，Vue.is对数组做了特殊处理,使得使用标准的数组操作方法对数组所做的修改,都可以被侦听到。
1.Vue不能检测以下数组的变动:
a.当你利用索引值直接设置一个数组时,例如:vm.items[indexOfItem] = newValue b.当你修改数组的长度时，例如:vm.items.length = newLength
2.使用标准方法修改数组可以被侦听到
https://v2.cn.vueis.org/v2/guide/list.html#%E6%95%B0%E7%BB%84%E6%9B%B4%E6%96%B0%E6%A3%80%E6%B5% '
push()尾部添加
pop()尾部删除
unshift()头部添加
shift()头部删除
splice()删除、添加、替换
sort()排序
reverse()逆序
(Vue将被侦听的数组的变更方法进行了包裹,所以它们也将会触发视图更新,以上就是被包裹的方法。)
-->
<body>
<div id="app">
<!-- 点击按钮改变天气 -->
<h1>今天天气,{{info}}</h1>
<button @click="change">切换天气</button>
<ul>
<li v-for="item in infot">{{item}}</li>
</ul>
<button @click="infot.push('小妮')">点击添加</button>
<p>{{obj.name}} </p>
</div>
<script>
new Vue({
el: '#app',
data: {
isHot: true,
infot: ["小白", "小花", "小小"],
obj: {
name: "小白",
age: 18,
height: 188
}
},
computed: {
info() {
return this.isHot ? '炎热' : '凉爽'
},
},
methods: {
change() {
this.isHot = !this.isHot;
}
},
watch: {
//参数一：改变后的值。
//参数二：改变前的值。
// 要侦听的数据(newValue, oldValue) {
// }
// info: {
// // 当isHot发生改变时调用
// // newvalue 新值 oldValue 旧值
// handler(newvalue, oldValue) {
// console.log(newvalue, oldValue) // 凉爽 炎热
// }
// },
//当不需要 初始化值 与 深度监视时 上面的简写形式
info(newvalue, oldValue) {
console.log(newvalue, oldValue) // 炎热 凉爽
},
//复杂数据类型，这连个参数没有意义，因为地址没变。
//所以复杂类型中，一般不会写这两个参数，因为这两个参数的值是一样的，就算写也只有一个。
// infot(newvalue, oldValue) {
// console.log(newvalue, oldValue)
// //['小白', '小花', '小小', '小妮', __ob__: Observer]
// // ['小白', '小花', '小小', '小妮', __ob__: Observer]
// }
infot(val) {
console.log(val)
}
}
})
</script>
</body>
<!--
1.Vue不能检测以下数组的变动:
a.当你利用索引值直接设置一个数组时,例如:vm.items[index0fItem] = newValue b.当你修改数组的长度时，例如:vm.items.length = newLength
在数组中使用侦听器总结:
1.彻底替换为一个新数组,那么可以被侦听到。
2.如果使用了push()等标准的数组操作方法,那么可以被侦听到。
3.如果直接修改数组的元素,那么无法被侦听到。
(解决方法:使用$set()方法修改元素的值。Vue3语法。)
不要使用length属性来修改数组长度,而改用其他标准方法显示数组长度的变化。
-->九.计算属性
(107条消息) Vue计算属性_cn33333的博客-CSDN博客
<body>
<script>
// 【计算属性】
// 可以在里面写一些计算逻辑的属性。
// 它不像普通函数自接返回结果， 而是经过一系列计算之后再返回结果。
// 同时只要在它当中应用了data中的某个属性，当这个属性发生变化时，计算属性可以嗅探到这种变化，并自动执行。
// 定义: 要用的属性不存在,通过已有属性计算得来。
// 使用:在computed对象中定义计算属性,在页面中使用{{方法名}}来显示计算的结果。
// 【基本结构】
new Vue({
el: '',
// 数据
data: {},
// 方法属性
// 事件绑定，不用return,没有缓存。
methods: {},
// 侦听器(重视过程)
watch: {
要侦听的数据() {}
},
// 计算属性(重视结果)
// 必须有return,只求结果,有缓存。
computed: {
计算属性名() {
// 经过一系列计算
return 处理操作后结果
}
}
})
</script>
</body>
<!--
1.每一个计算属性都包含一个getter函数与setter函数。
2.计算属性会默认使用getter函数.setter函数并不常见,所以一般计算属性getter和setter都不写。
3.getter函数是默认用法，setter函数不是默认用法。如果要使用setter函数，必须手动写出setter函数。
4.setter函数内的形参是你要修改的值 -->
<body>
<div id="baat">
<h1>Hello,{{fantcc}}</h1>
<input type="text" v-model="fantc"><br/><br/>
<input type="text" v-model="ming"><br/><br/>
</div>
<script type="text/javascript">
new Vue({
el: '#baat',
data: {
name: 'huao',
fantc: "z",
ming: "c"
},
computed: {
//完整版
fantcc: {
//当有人读取fantcc，就会调用get，
get() {
return this.fantc + "-" + this.ming
},
//当在页面上修改fantcc时调用
ste(value) {
const arr = value.split("-")
this.fantc = arr[0]
this.ming = arr[1]
}
//简写 只读取
// fantcc() {
// return this.fantc + "-" + this.ming
// }
}
}
});
</script>
</body>
计算属性基本使用
<body>
<div id="app">
<p>原始字符串：{{mass}}</p>
<p>翻转后：{{rever}}</p>
<p>转换为小写：{{casee}}</p>
<p>把第一个字母转换成小写{{sub}}</p>
</div>
<script>
new Vue({
el: "#app",
data: {
mass: 'CAAAAB',
},
computed: {
rever: function() {
//split('')把字符串分割成字符串数组 reverse()翻转排序 join('')把字符串数变成字符串
return this.mass.split('').reverse().join('')
},
casee() {
// toLowerCase()转换为小写
return this.mass.toLowerCase()
},
sub() {
return this.mass.substr(0, 1).toLowerCase() + this.mass.substring(1)
}
}
})
</script>
</body>十.储存方式
cookie
【cookie】
一：使用场景
1.记住密码，下次自动登入。
2.记录用户浏览器数据，进行商品（广告）推荐。
二：特点：
1.cookie保存在浏览器端
2.单个cookie保存的数据不能超过4kb。
3:cookie中的数据是以域名的形式进行区分的。
4:cookie中的数据是有过期时间的,超过时间数据会被浏览器自动删除。
5:cookie中的数据会随着请求被自动发送到服务器端。
三:
由于cookie存储机制有很多缺点，HTML5不再使用它,转而使用改良后的WebStorage存储机制。
(localStorage和sessionStorage)
localStorage
<script>
// 1.什么是localstorage
// 在HTML5中,新加入了一个localStorage特性,这个特性主要用来作为本地存储来使用。
// 它解决了cookie存储空间不足的问题,每条cookie的存储空间为4K，localStorage一般为5M。
// 2.localstorage的生命周期
// LocalStorage生命周期是永久，这意味着除非用户在显示在浏览器提供的UI上清除localStorage信息,
//否则这些信息将永久存在。
// 3.localstorage的局限
// a.在IE8以上的IE版本才支持localStorage这个属性。
// b.目前所有的浏览器中都会被localStorage的值类型限定为string类型，
//"对我们日常比较常见的JSON对象类型需要一个转换。
//4.判断浏览器是否支持localstorage这个属性
if (window.localStorage) {
alert('浏览器支持localStorage')
}
// 5.localstorage写入
if (!window.localStorage) {
alert('浏览器不支持localStorage')
} else {
var storage = window.localStorage;
//写入a字段
storage['a'] = 1;
//写入b字段
storage.b = 2;
//写入c字段
storage.setItem('c', 3)
console.log(typeof storage['a']); //string
console.log(typeof storage['b']); //string
console.log(typeof storage['c']); //string
// 获取数据:
console.log(storage.getItem('c')); // 3
// 删除数据:
storage.removeItem('c');
console.log(storage.getItem('c')); //null
// 删除所有数据:
// storage.clear();
}
</script>
</body>SessionStorage
SessionStorage对生命周期
SessionStorage对生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了
那么所有通过Session存储的数据也清空了
例：JSON转换
<body>
<script>
//JSON和JS对象的关系
// JSON是JS对象的字符串表示法,它使用文本表示一个JS对象的信息,本质是一个字符串。
// 这个一个对象
var obj = {
a: "hello",
b: "world"
};
console.log(typeof(obj)); //object
// 这个一个JSON字符串,本质是一个字符串
var json = {
"a": "hello",
"b": "world"
};
console.log(typeof(json)); //string
// 【JSON和JS对象互转】
// JSON.parse(()方法 实现从JSON字符串转换为JS对象
var obj = JSON.parse('{"a" :"hello", "b":"world"}')
console.log(obj); //object
// JSON.stringify()方法 实现从JS对象转换为JSON字符串
var json = JSON.stringify({
a: "hello",
b: "world"
})
console.log(json);
</script>
</body>例：番茄钟
<!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>Document</title>
<script src="./vue/js/vue.js"></script>
<style>
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background: rgb(0, 0, 0);
}
.container {
width: 400px;
height: 350px;
margin-left: 40%;
margin-top: 100px;
/* background: cadetblue; */
}
.timer {
width: 400px;
height: 150px;
color: aliceblue;
font-size: 100px;
font-weight: 500;
}
.controls {
display: flex;
margin-left: 80px;
}
.fa {
margin-left: 30px;
}
.input {
margin-left: 100px;
}
</style>
</head>
<body>
<div class="container">
<div id="app">
<!-- 显示时间 -->
<div class="timer">
<span class="minute">{{countm}}</span>
<span>:</span>
<span class="secondes">{{counts}}</span>
</div>
<!-- 控制器 -->
<div class="controls">
<div>
<button class="fa kaishi" @click="likai" v-if="kaishi">开始</button>
</div>
<div>
<button class="fa fa-pause" @click="pause" v-if="paus">暂停</button>
</div>
<div>
<button class="fa fa-play" @click="play" v-if="pla">停止</button>
</div>
<div>
<button class="fa fa-edit" v-if="edit" @click="editt">编辑</button>
<button class="fa fa-check" v-if="check" @click="checkk">确认</button>
<button class="fa fa-close" v-if="close" @click="closee">取消</button>
</div>
</div>
<!-- 修改时间 -->
<div class="input" v-if="inputt">
<input type="number" min="1" v-model.lazy="daojishi">
</div>
<!-- 倒计时结束后播放音频 -->
<!-- <audio src="" id="audio " loop>
您的浏览器不支持"aubio "标记
</audio> -->
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
daojishi: 24,
secondes: '',
countm: '00',
counts: '00',
pausee: true,
//控制按钮显示与隐藏
kaishi: true,
edit: true,
paus: false,
pla: false,
check: false,
close: false,
inputt: false
},
methods: {
// 倒计时的实现
likai() {
//暂停事件 第三步：防止暂停 后点开始时 调用把时间重置
if (this.pausee == true) {
//第一步：当光标离开时 给 secondes 赋值变成毫秒 在调用定时器
this.secondes = this.daojishi * 60;
}
//暂停事件第五步：当点击开始时 修改状态 true
this.pausee = true;
var aet = setInterval(() => {
//第二步：定时器每过1秒参数减 1
this.secondes--;
//第三部步 用秒计算出 分钟 秒 并赋值给 countm 分 counts 秒
let m = parseInt(this.secondes / 60 % 60);
m = m < 10 ? "0" + m : m
let s = parseInt(this.secondes % 60);
s = s < 10 ? "0" + s : s
this.countm = m
this.counts = s
// 第四步： 当到0秒时停止计时器 并恢复原状态
if (this.countm == '00' && this.counts == '00') {
clearInterval(aet);
this.countm = '00';
this.counts = '00';
}
// 暂停事件 第二步 停止计时器 当状态为 false 时停止计时器
if (this.pausee == false) {
clearInterval(aet);
}
}, 1000)
//控制按钮显示与隐藏
if (this.kaishi == true) {
this.paus = true;
this.pla = true;
this.kaishi = false;
this.edit = false;
}
},
//停止：重置事件 直接让时间到1秒停止计时器 调用第四步
play() {
//判断暂停后点击停止
if (this.pausee == false) {
this.pausee = true;
this.countm = '00';
this.counts = '00';
}
this.secondes = 1;
//控制按钮显示与隐藏
this.pla = false;
this.paus = false;
this.kaishi = true;
this.edit = true;
},
//暂停事件 第一步：把状态修改 为 false
pause() {
this.pausee = false;
//控制按钮显示与隐藏
this.kaishi = true;
this.edit = true;
this.paus = false;
},
//编辑按钮
editt() {
this.paus = false;
this.pla = false;
this.kaishi = false;
this.edit = false;
this.inputt = true;
this.check = true;
this.close = true;
},
//确认按钮
checkk() {
this.kaishi = true;
this.edit = true;
this.inputt = false;
this.check = false;
this.close = false;
this.countm = "" + this.daojishi;
this.counts = '00';
},
//取消按钮
closee() {
this.kaishi = true;
this.edit = true;
this.inputt = false;
this.check = false;
this.close = false;
}
},
})
</script>
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
