zoukankan      html  css  js  c++  java
  • CSIC_716_20200212【Vue入门-属性指令、事件指令、表单指令、条件指令、循环指令、数组操作前台数据库】

    """
    1、v-cloak斗篷指令
    2、属性指令
    v-bind:title="变量"
    :class="变量" | :class="[变量1, ..., 变量n]" | :class="{类名: 布尔变量}"
    :style="字典变量"
    3、事件:@click @dblclick @mouseover|out|down|up
    鼠标单击、双击、悬浮、移开、按下、抬起
    4、表单指令:
    v-model绑定变量控制value属性,可以实现双向绑定
    5、条件指令:
    v-show | v-if
    v-if | v-else-if | v-else
    6、循环指令:
    字符串:v-for="v in str" | v-for="(v, i) in str"
    数组:v-for="v in arr" | v-for="(v, i) in arr"
    对象:v-for="v in obj" | v-for="(v, k) in obj" | v-for="(v, k, i) in obj"

    7、Array操作
    arr.push(ele) arr.unshift(ele)
    arr.pop() arr.shift()
    arr.splice(begin_index, count, args)

    8、前台数据库
    localStorage | sessionStorage
    1)操作就类似于obj,直接 .key 语法访问 value
    2)localStorage永久存储
    3)sessionStorage生命周期同所属页面标签

    综合实例

    books = [
        { name: '西游记', price: 66, author: 'Bob'},
        { name: '东游记', price: 77, author: 'Tom'},
        { name: '西厢记', price: 88, author: 'Jerry'},
    ]
    用表格table渲染以上数据
    
    扩展要求:
    
        i) 可以在表格每条数据后加一个 删除 按钮,可以删除当前书籍
        ii) 可以增加三个输入框,一个提交框,完成新增书籍
        iii) 刷新页面数据不会重置

    实现代码如下

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/vue.js"></script>
    
    </head>
    <body>
    <div id="app">
    
        <table>
            <thead>
            <tr>
                <th v-for="(e,k,i) in books[0]">{{k}}</th>
    <!--            e是值value,k是键key,i是索引index-->
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(obj,i) in books">
                <td>{{obj.name}}</td>
                <td>{{obj.price}}</td>
                <td>{{obj.author}}</td>
                <td>
                    <button @click="delbook(i)">删除</button>
                </td>
            </tr>
            </tbody>
        </table>
    
        <form action="">
            name <input name="name" type="text" v-model="n1">
            price<input name="price" type="text" v-model="p1">
            author<input name="author" type="text" v-model="a1">
            <button type="button" @click="addbook">点我提交</button>
        </form>
    
    
    </div>
    
    </body>
    
    <script>
        let books = [
            {name: '西游记', price: 66, author: 'Bob'},
            {name: '东游记', price: 77, author: 'Tom'},
            {name: '西厢记', price: 88, author: 'Jerry'},
        ];
        new Vue({
            el: '#app',
            data: {
                n1: '',
                p1: '',
                a1: '',
                books: localStorage.books ? JSON.parse(localStorage.books) : books
            },
            methods: {
                addbook() {
                    let obj = {
                        name: this.n1,
                        price: this.p1,
                        author: this.a1
                    };
                    // this.books.push(obj);
                    this.books.unshift(obj);
                    this.n1 = '';
                    this.p1 = '';
                    this.a1 = '';
                    localStorage.books = JSON.stringify(this.books)
    
                },
                delbook(index) {
                    this.books.splice(index, 1);
                    localStorage.books = JSON.stringify(this.books)
                }
    
            }
    
        })
    </script>
    </html>
    本节案例
  • 相关阅读:
    取得窗口大小和窗口位置兼容所有浏览器的js代码
    一个简单易用的导出Excel类
    如何快速启动chrome插件
    网页表单设计案例
    Ubuntu下的打包解包
    The source file is different from when the module was built. Would you like the debugger to use it anyway?
    FFisher分布
    kalman filter
    Group delay Matlab simulate
    24位位图格式解析
  • 原文地址:https://www.cnblogs.com/csic716/p/12301932.html
Copyright © 2011-2022 走看看