初学Vue----案例一

案例一:记事本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<h1 style="margin-left: 50px">亦碎记事本</h1>
<div id="app3">
<input type="text" v-model="inputValue" @keyup.enter="add" placeholder="请输入内容" style="margin-left: 50px">
<section>
    <ul style="list-style-type:none">
        <li v-for="(item,index) in list">
            <div style="width: 200px" >
                <span>{{index+1}}.</span>
                <label>{{item}}</label>
                <button style="float: right" @click="remove(index)">×</button>
            </div>
        </li>
    </ul>
</section>
<footer style="width: 200px;margin-left: 40px">
    <span v-if="list.length!=0"><strong>{{list.length}}</strong>条数据</span><button @click="clear" v-show="list.length!=0" style="float: right">clear</button>
</footer>
</div>
<script>
    new Vue({
      el:"#app3",
      data:{
          list:[],
          inputValue:"好好学习"
      },
        methods:{
          remove:function (index) {
                this.list.splice(index,1);
          }, 
            add:function () {
                this.list.push(this.inputValue);
            },
            clear:function () {
                this.list=[];
            }
        }
    })
</script>
</body>
</html>

运行结果
初学Vue----案例一_第1张图片
案例二:轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <a href="javascript:void(0)" v-show="index!=0" @click="prev">上一张</a>
    <img :src="imgArray[index]">
    <a href="javascript:void(0)" v-show="index!=imgArray.length-1" @click="next">下一张</a>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            imgArray:[
                "images/t01ea60ee178537f87b.jpg",
                "images/t01fcdeaabd15b66b5c.jpg",
                "images/t0180f7d47e29210706.jpg",
                "images/t014438018b4d5d87a5.jpg",
                "images/t0146970184453dbf97.jpg",
            ],
            index:0
        },
        methods:{
            prev:function () {
                this.index--;
            },
            next:function () {
                this.index++;
            }
        }
    })
</script>
</body>
</html>

运行结果
初学Vue----案例一_第2张图片

你可能感兴趣的:(vue)