Vue 例子
一、简单音乐播放器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="music">
<audio muted :src="currentSrc" autoplay="autoplay" controls="controls" @ended="nextSongs"></audio>
<ul>
<li v-for="(item, index) in musicArr" @click="clickHandler(item)">
<h4>歌名: {{item.name}}</h4>
<p>作者：{{item.author}}</p>
<hr>
</li>
</ul>
</div>
<script src="./js/vue.js"></script>
<script>
var songs = [
{id:1, src:"./audios/1.mp3", name:"Bend Your Mind", author:"Elysian Fields"},
{id:2, src:"./audios/2.mp3", name:"Talk Baby Talk", author:"Emma Louise"},
{id:3, src:"./audios/3.mp3", name:"1965", author:"Zella Day"},
{id:4, src:"./audios/4.mp3", name:"岁月神偷", author:"金玟岐"}
]
var mu = new Vue({
el: "#music",
data: {
musicArr: songs,
currentSrc: "./audios/1.mp3",
currentIndex: 0, },
methods:{
clickHandler(item){
this.currentSrc = item.src;
},
nextSongs(){
this.currentIndex += 1;
this.currentSrc = this.musicArr[this.currentIndex].src;
console.log(this.currentSrc)
}
},
computed:{},
})
</script>
</body>
</html>
二、轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue指令</title>
<style>
.c1 {
height: 200px;
width: 200px;
background-color: brown;
}
.c2 {
height: 200px;
width: 200px;
background-color: blue;
}
ul {
width: 120px;
overflow: hidden;
}
ul li {
list-style-type: none;
float: left;
margin-left: 20px;
color: white;
background-color: black;
}
</style>
</head>
<body>
<div id="app">
<div v-if = 'show'>Hello World</div>
<button v-on:click = 'clickHandler'>切换</button>
<h2 v-show="isShow">嘿嘿嘿</h2>
<div v-if="type=='A'">
A
</div>
<div v-else-if="type=='B'">
B
</div>
<div v-else-if="type=='C'">
C
</div>
<div v-else>
other
</div>
<!-- <img src="./images/1.jpg" alt="" v-bind:title="title"> -->
<img v-bind:src="imgSrc" v-bind:alt="alt" v-bind:title="title">
<div class="c1" v-bind:class="{c2: isBlue}"></div>
<button v-on:click="changeColor">切换颜色</button>
<div>
<img v-bind:src="currentSrc" alt="" @mouseenter="closeTimer" @mouseleave="startTimer">
<ul>
<li v-for="(item, index) in imgArr" @click="clickImg(item)">{{index+1}}</li>
</ul>
</div>
<button @click="nextImg">下一张</button>
<div v-html='s'> </div>
</div>
<script src="./js/vue.js"></script>
<script>
currentTime = new Date().toLocaleString();
var app = new Vue({
el: '#app',
data: {
name: "tom",
age: 24,
show: false,
type: 'B',
isShow: false,
imgSrc: "./images/1.jpg",
title: '老婆',
// 模板字符串
alt: `加载时间${currentTime}`,
isBlue: false,
imgArr: [
{id:1, src: "./images/1.jpg"},
{id:2, src: "./images/2.jpg"},
{id:3, src: "./images/3.jpg"},
{id:4, src: "./images/4.jpg"},
],
currentSrc: "./images/1.jpg",
currentIndex: 0,
timer: null,
s: "<p>Hi</p>", },
created(){
this.timer = setInterval(this.nextImg, 2000);
},
methods:{
clickHandler(){
this.show = !this.show;
},
changeColor(){
this.isBlue = !this.isBlue;
},
clickImg(item){
// console.log
this.currentSrc = item.src;
},
nextImg(){
// alert(123)
console.log(this.currentIndex)
console.log(this.imgArr.length-1)
if(this.currentIndex==this.imgArr.length-1){
this.currentIndex = 0;
}
this.currentIndex += 1;
console.log(this.imgArr[this.currentIndex].src);
this.currentSrc = this.imgArr[this.currentIndex].src;
},
closeTimer(){
clearInterval(this.timer);
},
startTimer(){
this.timer = setInterval(this.nextImg, 2000);
},
},
})
</script>
</body>
</html>
Vue 例子的更多相关文章
- 通俗理解vuex原理---通过vue例子类比
本文主要通过简单的理解来解释下vuex的基本流程,而这也是vuex难点之一. 首先我们先了解下vuex的作用 vuex其实是集中的数据管理仓库,相当于数据库mongoDB,MySQL等,任何组件都可以 ...
- 举个例子去理解vuex（状态管理），通俗理解vuex原理，通过vue例子类比
通俗理解vuex原理---通过vue例子类比 本文主要通过简单的理解来解释下vuex的基本流程,而这也是vuex难点之一. 首先我们先了解下vuex的作用vuex其实是集中的数据管理仓库,相当于数 ...
- vue.js——初体验
看到最近很火的vue.js,于是开启了自己人生中首篇翻译之路,才意识到这个纯英文版的的确没有中文的通俗易懂~~~~~~不过, 还是硬着头皮把这篇英文版的博客给翻译完了,希望可以帮助自己的同时也方便别人 ...
- vue初探
vue初探 很多同学一定都听过MVVM.组件.数据绑定之类的专业术语,而vue框架正是这样的一种框架.vue的作用是:通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 第一部分:vue介 ...
- vue.js 混入
混入:mixins 一种分发Vue组件中可反复使用的功能的方法. 混入对象可以:包含任意组件选项. 混入对象的选项将被混入该组件本身的选项. 如果有同名选项,在和组件的数据发生冲突时,组件数据优先.混 ...
- VUE和ES6资源收集
MDN https://developer.mozilla.org/zh-CN/docs/Web/JavaScript https://developer.mozilla.org/en/docs/We ...
- vue的双向绑定原理浅析与简单实现
很久之前看过vue的一些原理,对其中的双向绑定原理也有一定程度上的了解,只是最近才在项目上使用vue,这才决定好好了解下vue的实现原理,因此这里对vue的双向绑定原理进行浅析,并做一个简单的实现. ...
- Vue学习(1)---Vue介绍
Vue是什么 官方定义:Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层 ...
- 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法
Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...
随机推荐
- 关于better-scroll的使用注意事项
better-scroll的原理 1.什么是 better-scroll? better-scroll 是一个移动端滚动的解决方案,它不仅可以做普通的滚动列表,还可以做轮播图.picker 等等. 2 ...
- Linux 内核 PCI 总线
任何在 PCI 总线上的设备有参数 name 和 SUBSYSTEM 环境变量设置为值 pci. PCI 子系 统也一直添加下面 4 个环境变量: PCI_CLASS 设备的 PCI 类号, 16 进 ...
- Linux 设备模型
在 2.5 开发循环中一个声明的目标是为内核创建一个统一的设备模型. 之前的内核没有单一的数据结 构, 使它们可以来获取关于系统如何整合的信息. 尽管缺乏信息, 有时事情也进行的不错. 新系统, 带 ...
- 牛客多校第三场 G Removing Stones（分治+线段树）
牛客多校第三场 G Removing Stones(分治+线段树) 题意: 给你n个数,问你有多少个长度不小于2的连续子序列,使得其中最大元素不大于所有元素和的一半 题解: 分治+线段树 线段树维护最 ...
- JAVA兼职架构师
在一些小企业或者公司人力不足的时候,经常会出现一个人干多个人的活.开发可能会干架构.测试.运维,一些小项目可能需要一个人完成.我把这些角色合并在一起称之为兼职架构师. 我用我的经历来说说兼职架构师的需 ...
- Servlet 会话
在网络的七层模型中,会话层位于传输层之上,它定义如何开始.控制和结束一个会话.七层模式目前仅仅处于理论阶段,但是Web中借鉴了其中的一些思路.在Web中浏览器第一次发送请求到服务器开始直到一方断开为止 ...
- 盘一盘 Thread源码
线程是操作系统能够进行运算调度的最小单位.它被包含在进程之中,是进程中的实际运作单位.一条线程指的是进程中一个单一顺序的控制流,一个进程中可以并发多个线程,每条线程并行执行不同的任务. 继承关系图 线 ...
- 012.MFC_ListControl
列表控件CListCtrl 四种视图:大图标 .小图标.列表.详细信息CImageList
- seek方法补充
seek 默认模式是从文件的开始移动光标,一共有0.1.2三种模式 f=open('seek.txt','r',encoding='utf-8') print(f.tell()) f.seek(10, ...
- MyISAM与InnoDB的索引实现区别
一 MyISAM索引实现 1. 主键索引 MyISAM引擎使用B+树作为索引结果,叶节点的data域存放的是数据记录的地址.下图为MyISAM表的主索引,Col1为主键. 2. 辅助索引 在MyISA ...