Vue实现简单的图片自动轮转

代码如下所示


<html>
<head>
<meta charset="utf-8">
<title>图片的轮转title>
head>
<body>
	
    <div id="app">
      <img v-bind:src="url">
    div>
    <script src="./libs/vue.js" type="text/javascript">script>
    <script>
        var vm=new Vue({
                el:"#app",
                data:{
                    url:""
                },
        })  
        var num=1 
        setInterval(function(){    
                num<5?num++:num=1,
                vm.$data.url='./imgs/'+num+'.jpg'
                },2000)       
    script>
body>
html>

v-bind采用属性绑定注意图片的路径必须写正确!

你可能感兴趣的:(前端框架vue)