RT

v-bind //数据绑定(多数用于表单元素)
以数组的形式

<span :style=”[style1,style2]”> </span>
data: {
style1: ‘fontSize30’,
Style2: ‘red’,
}

以对象的形式

<span :style=”{color : ‘red’,fontSize:’font’}”> </span>
data: {
red: ‘red’,
font: ‘30px’,
}

v-on // v-on:事件名称=“方法名 (事件绑定)

<button  @click=”type = ‘text’”></button>
<button  @click=”type = ‘radio’”></button>
data:{
type : ‘text’
}

v-model //双向数据绑定,输入框内值改变,div内的值也会发生变化

<input type="text" v-model=""title>
<div>{{title}}</div>
data:{
title: ‘111111111’
}

不使用v-model实现

<input type="text"  :value-”title” @input=”e => title = e.target.value”>


<!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>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="./vue.js"></script>
    <style>
    #app a{
        display: block;
    }
    #app span{
        display: inline-block;
        padding: 0 10px
    }
    #app p{
        display: inline-block;
        width: 100px;
        float: right;
    }
    #app i{
        padding: 0 8px;
        cursor: pointer;
        font-weight: 800;
    }
    .isFinsh>.badge{
       background-color: green!important
    }


    </style>
</head>
<body>
    <div id="app" class="container text-center" >
        <div class="row">
            <div class="col-md-7">
                <div class="form-group">
                    <label>添加工作事项</label>
                    <input type="text" class="form-control" v-model="newItme" @keyup.enter="addItem">
                </div>
            </div>
        </div>
        <div class="row" >
            <div class="list-group-item">工作清单</div>                    
            <div href="javascript:;"  class="list-group-item text-left"  v-for="(item, index) in Items"  v-if="!item.isFinsh">
                <span>{{index+1}}</span>
                <span>{{item.title}}</span>
                <span class="line"></span>
                <p>
                    <span @click="removeItem(index)">
                        <i class="badge">x</i>
                    </span>
                    <span :class="{isFinsh:item.isFinsh}" @click="toogleItem(item)">
                        <i class="badge">√</i>
                    </span>
                </p>
            </div>
            <div class="list-group-item">已完成</div> 
            <div href="javascript:;"  class="list-group-item text-left"  v-for="(item, index) in Items" v-if="item.isFinsh">
                <span>{{index+1}}</span>
                <span>{{item.title}}</span>
                <span :class="{isFinsh:item.isFinsh}" @click="toogleItem(item)">
                    <i class="badge">x</i>
                </span>
            </div>
        </div>
    </div>
    <!-- <input type="text" v-model=""title>
    <div>{{title}}</div> -->
    <script>
        let lsC = (function(){
            return{
                add(value){
                    localStorage.setItem('todoList',JSON.stringify(value))
                },
                get(){
                    return JSON.parse(localStorage.getItem('todoList'))
                },
                remove(){
                    localStorage.removeItem('todoList')
                }
            }
        })()
        let vm = new Vue({
            el : '#app',
            data: {
                newItme : "",
                Items:lsC.get() || []
            },
            methods:{
                addItem(){
                    var item = {
                        id: this.Items.length + 1,
                        title: this.newItme,
                        isFinsh: false
                    } 
                    this.Items.push(item);
                    lsC.add(this.Items);
                    this.newItme = ""
                },
                toogleItem(item){
                    item.isFinsh = !item.isFinsh;
                    lsC.add(this.Items)
                },                
                removeItem(index){
                    this.Items.splice(index,1);
                    lsC.add(this.items)
                }
            }
        });

    </script>
</body>
</html>
暂无评论
shijiebei 365bet manbetx 188bet xinshui caipiao 95zz tongbaoyule beplay 88bifa 18luck betway bwin hg0088 aomenjinshayulecheng ca88 shenbotaiyangcheng vwin w88 weide