vue.js,基础用法实例

最新推荐文章于 2023-03-01 16:02:58 发布

Agrass啊草

最新推荐文章于 2023-03-01 16:02:58 发布

阅读量721

点赞数

分类专栏： vue 文章标签： vue-js 基础 demo

本文链接：https://blog.csdn.net/unaMattin/article/details/74010783

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

vue的基础用法实例

v-if , v-else
v-on ( 缩写 @ )
v-bind ( 缩写 : )
v-for
v-model
methods
el
watch
data

demo可直接复制使用，自行下载vue.js文件，助于熟悉基础

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>to-do-list</title>
    <style type="text/css">
        #vuedotolist{width: 400px;height: 500px;border: 2px solid #333;border-radius: 3px;margin:60px auto;position: relative;}
        .edit{width: 80%;height: 35px;line-height: 35px;margin-top:30px;box-shadow: 0 0 4px #ccc;border: 1px solid #ccc;border-radius: 4px;outline: 0;box-sizing: border-box;margin-left: 10%;text-indent: 20px;}
        .list{margin:0 auto;max-width: 80%;height: 60%;overflow-y: auto;}
        .unit{position: relative;padding: 10px 0;border-bottom: 1px solid #efefef;}
        .unit:last-child{border-bottom: 0;}
        .finish{text-decoration: line-through;color: #ccc;}
        .del{background: red;text-decoration: none;position: absolute;right: 20px;font-size: 12px;border:0;padding: 2px 5px;border-radius: 5px;color: #fff;cursor:pointer;}
        .empty{font-size: 14px;color: #928787;text-align: center;padding: 10px 0;}
        .number{position: absolute;right: 40px;bottom: 0px;}
    </style>
</head>
<body>
    <div id="vuedotolist">
        <input  v-model="task.content" type="text"  class="edit" placeholder="编写任务" @keydown.enter="addTask" />
        <p v-if="list.length==0" class="empty">今天暂无安排...</p>
        <div class="list" v-else>
            <div class="unit" v-for="(item,index) in list">
                <input type="checkbox" :checked="item.finished" @click="changeState(index)" />
                <span :class="{'finish':item.finished}">{{item.content}}</span>
                <button @click="removeTask(index)" class="del">删除</button>
            </div>
        </div>
        <p class="number">任务数量：{{list.length}}</p>
    </div>
</body>
<!-- <script src="https://unpkg.com/vue/dist/vue.js"></script> -->
<script src="src/vue.js"></script>
<script>
    const STORAGE_KEY = 'to-do-list'
    var fetch=function(){
        return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]')
    };
    var save=function(items){
        window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items))
    };


    const vuedotolist = new Vue({
        el:"#vuedotolist",
        data:{
            //默认
            task:{
                content:'',       //内容
                finished:false,   //未完成
            },
            //任务列表，默认取localStorage的数据
            list:fetch()
        },
        methods:{
            //添加新的任务
            addTask:function(){
                if (this.task.content != "") {
                    this.list.push(this.task);
                    // save(this.task);
                    //存入list之后，重置task
                    this.task={
                        content:'',
                        finished:false,
                        // deleted:false
                    }
                }
            },
            //取反值，修改状态
            changeState:function(index){
                let curSate=this.list[index].finished;
                this.list[index].finished=!curSate;
            },
            //移除当前的数据，重新返回数组给lsit
            removeTask:function(index){
                this.list.splice(index,1);
            }
        },
        //监听，一旦list[]发生变化，存入localStorage数据
        watch:{
            list:{
                handler:function(){
                    save(this.list);
                }
            }
        }
    })

</script>
</html>

Agrass啊草

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js,基础用法实例

vue的基础用法实例v-if , v-elsev-on ( 缩写 @ )v-bind ( 缩写 : )v-forv-modelmethodselwatchdata demo可直接复制使用，自行下载vue.js文件，助于熟悉基础<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <tit
复制链接

扫一扫