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]基 ...
随机推荐
- 使用 node.js三行代码实现手机端访问html页面文件
首先确保你安装了node (全局安装) npm install -g browser-sync // --files 路径是相对于运行该命令的项目(目录) browser-sync start --s ...
- Koa搭建简单服务器
1. dependencies "co-mysql": "^1.0.0", "koa": "^2.7.0", " ...
- python 多线程两种实现方式，Python多线程下的_strptime问题，
python 多线程两种实现方式 原创 Linux操作系统 作者:杨奇龙 时间:2014-06-08 20:24:26 44021 0 目前python 提供了几种多线程实现方式 thread,t ...
- linux 如何查找命令的路径（which搜索系统命令，whichis搜索文件）
http://hi.baidu.com/longredhao/item/911356ea2d8bed3687d9deed linux 下,我们常使用 cd ,grep,vi 等命令,有时候我们要查到这 ...
- elasticsearch基础知识杂记
日常工作中用到的ES相关基础知识和总结.不足之处请指正,会持续更新. 1.集群的健康状况为 yellow 则表示全部主分片都正常运行(集群可以正常服务所有请求),但是 副本 分片没有全部处在正常状态. ...
- python基础试题(一)
1.执行 Python 脚本的两种方式 1.python 进入解释器 2.python 1.py 执行文件 limux里 ./1.py 2.简述位.字节的关系 8位1个字节.计算机处理以字节为单位,存 ...
- ABP-AsyncLocal的使用
1.与AsyncLocal对应的是ThreadLocal 2.两种类型 初始赋值 AsyncLocalString.Value = new List { "1" }; AsyncL ...
- 微服务实战——微服务架构选型SpringCloud / Dubbo / K8S比较（一）
## 说在前面 大概是三年前,因一些原因公司原项目最初为单体结构部署,所有业务模块都在一个项目里面,而后随着业务的不断膨胀以及模块之间的耦合,导致后面增加或修改一些简单业务时的成本都会变的极大.新入职 ...
- javascript DOM 编程艺术 札记2 平稳退化
定义 指的是即便浏览器不支持javascript,页面的基础展示功能也不会受到影响的做法. 不能平稳退化的实例 javascript:这种伪协议,它可以通过链接调用javascript函数.比如< ...
- Ubuntu 18.04 64位安装tensorflow-gpu
第一步(可直接跳到第二步):安装nvidia显卡驱动 linux用户可以通过官方ppa解决安装GPU驱动的问题.使用如下命令添加Graphic Drivers PPA: 1 sudo add-apt- ...