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]基 ...
随机推荐
- vue-learning：19 - js - filters
filters 基本使用 仅限在插值{{}}和v-bind指令中使用 管道符|分隔 链式调用 传入参数 全局注册和局部注册 纯函数性质(不能使用this) 基本使用 我们看下之前用计算属性实现的例子, ...
- Luogu P4173 残缺的字符串-FFT在字符串匹配中的应用
P4173 残缺的字符串 FFT在字符串匹配中的应用. 能解决大概这种问题: 给定长度为\(m\)的A串,长度为\(n\)的B串.问A串在B串中的匹配数 我们设一个函数(下标从\(0\)开始) \(C ...
- 2018-2-13-win10-uwp-判断文件存在
title author date CreateTime categories win10 uwp 判断文件存在 lindexi 2018-2-13 17:23:3 +0800 2018-2-13 1 ...
- dotnet 特性 DynamicallyInvokable 是用来做什么的
我在 Linq 很多函数都看到 __DynamicallyInvokable 这个特性,这是一个没有官方文档的特性,也许是用来优化反射 在堆栈 网找到了以下描述 这个 __DynamicallyInv ...
- ie6,7不支持display:inline-block;
解决方案: display:inline-block; *display:inline;*zoom:1; ie6:* _ ,ie7:*
- geoip ip2region2 with spark
上一篇文章中 我使用 maxmind的免费库开发了一个waterdrop的 插件,测试数据发现,国内的有些市级还是不准确,而且香港并不是显示中国,这就不友好了. 找了一下,发下 ip2region 这 ...
- codeforces 220B . Little Elephant and Array 莫队+离散化
传送门:https://codeforces.com/problemset/problem/220/B 题意: 给你n个数,m次询问,每次询问问你在区间l,r内有多少个数满足其值为其出现的次数 题解: ...
- Python_全局变量的定义
1.在my套件下新建一个关键字systemkey并进行脚本的编写:创建一个${var1}变量,并赋值为aaaaaaaaaa Set Global Variable ${var1} ...
- 0016 CSS 背景：background
目标 理解 背景的作用 css背景图片和插入图片的区别 应用 通过css背景属性,给页面元素添加背景样式 能设置不同的背景图片位置 [插入图片,不用设置img元素的父元素.自身元素大小,即可见,但是背 ...
- poj-1511
从1节点到所有节点的最短路和,加上所有节点返回1节点的最短路和,刚开始的方法时间复杂度有毒啊 其实只要把边全反向重装一次就好了哈哈哈 好了就是这样,套路了一个dijkstra+优先队列 #includ ...