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]基 ...
随机推荐
- ASP.NET MVC4.0+EF+LINQ+bui+bootstrap+网站+角色权限管理系统（开篇）
系统预览: 源码下载:http://www.yealuo.com/Home/Detail?KeyValue=2f926407-f80b-4bff-a729-949a53efed7b 创建项目,新手按步 ...
- redisUtil
package com.cinc.ecmp.utils; import org.springframework.beans.factory.annotation.Autowired; import o ...
- Asp.net全局资源文件( App_GlobalResources）和本地资源文件（App_LocalResources）
今天项目中需要加入对不同语言的支持. 找了半天的资料,关于GlobalResources和LocalResource都说的模棱两可的. 只能自己边找资料边试. 全局资源文件 样例(Demo中有 ...
- read、write 与recv、send区别 gethostname
recv相对于read有什么区别呢? 其实它跟read函数功能一样,都可以从套接口缓冲区sockfd中取数据到buf,但是recv仅仅只能够用于套接口IO,并不能用于文件IO以及其它的IO,而read ...
- 查看HBase表在HDFS中的文件结构（转发）
转自:http://greatwqs.iteye.com/blog/1839232
- Java之String类常用API
目录 Java之String类常用API char chatAt(int index) int length() char[] toCharArray() String(char value[]) S ...
- __str__、__repr__和__format__
obj.__ str __ ()是面向用户的,该方法将实例转换为一个字符 obj.__ repr __ ()面向程序员,该方法返回一个实例的代码表示形式,通常用来重新构造这个实例,repr()函数返回 ...
- PAC 代理自动发现简介
一 简介 1.1 什么是PAC文件 代理自动配置(PAC)文件包含一组用javaScript编码的规则,允许web浏览器确定是将Web流量直接发送到Internet还是通过代理服务器发送 ...
- docker常用命令（不包括run和build）
docekr 常用命令 :ls 列出容器 $ docker image ls REPOSITORY TAG IMAGE ID CREATED SIZE jdk fec5236a803b seconds ...
- pytorch :: Dataloader中的迭代器和生成器应用
在使用pytorch训练模型,经常需要加载大量图片数据,因此pytorch提供了好用的数据加载工具Dataloader. 为了实现小批量循环读取大型数据集,在Dataloader类具体实现中,使用了迭 ...