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]基 ...
随机推荐
- win10 uwp 使用 LayoutTransformer
如果需要使用旋转,那么很容易把图片旋转的布局被裁剪.如果需要旋转的控件还在指定的 Grid 内,就需要使用布局的旋转.本文告诉大家如何使用 LayoutTransformer.需要知道,uwp是没有 ...
- P1043 查找小于x的最大元素
题目描述 现在告诉你一个长度为 \(n\) 的有序数组 \(a_1, a_2, ..., a_n\) ,以及 \(q\) 次询问,每次询问会给你一个数 \(x\) ,对于每次询问,你需要输出数组 \( ...
- C# 从零开始写 SharpDx 应用 绘制基础图形
本文告诉大家通过 SharpDx 画出简单的 2D 界面 本文属于 SharpDx 系列 博客,建议从头开始读 本文分为两步,第一步是初始化,第二步才是画界面 初始化 先创建 RenderForm 用 ...
- vue-learning：19 - js - filters
filters 基本使用 仅限在插值{{}}和v-bind指令中使用 管道符|分隔 链式调用 传入参数 全局注册和局部注册 纯函数性质(不能使用this) 基本使用 我们看下之前用计算属性实现的例子, ...
- js 的this指向问题
this指向的,永远只可能是对象! this指向谁,永远不取决于this写在哪!而是取决于函数在哪调用. this指向的对象,我们称之为函数的上下文context,也叫函数的调用者. 1:通过函数名直 ...
- substring和substr的区别和使用
第一反应是都是截取字符串的方法,好像平常使用的时候也没太注意区分这俩,今天看到正好来区分一下 substring(start,[end]) 如果省略end,那么截取的是从指定位置到末尾 var str ...
- [板子]快速幂&矩阵快速幂
不会的来这看:https://www.cnblogs.com/CXCXCXC/p/4641812.html 简单的一说:当转换为二进制的时候有位运算这种黑科技,&相当于%2判断奇偶性. x&a ...
- 2019前端学习路线心得-黑马程序员pink老师
在规划之前先给大家分享几点心得哈: 1. 学习,特别是在线学习,是非常辛苦的事情,为了少走弯路, 所以一定要系统学习,多借鉴与前辈们总结出来的经验. 2. 不要相信任何说 一周掌握 css, 一周学完 ...
- 安装低版本Microsoft .NET Framework 4.5受阻解决方案
在VS目标框中找不到Microsoft .NET Framework 4.5,项目出错,安装受阻.... 1.Microsoft .NET Framework 安装了高版本后,低版本通过网上上下载的d ...
- 第二阶段：2.商业需求文档MRD：5.MRD-Roadmap及规划
产品路线图可以用泳道图来实现.将之前做过的泳道图的角色换为阶段即可. 可以以月为单位.左边就是一些产品的功能. 基础功能,有的功能会跨月甚至夸功能模块.比如图中的会员等级. 通过线段来联系各个功能与先 ...