zoukankan      html  css  js  c++  java
  • Vue.js实战

    指令

    什么是指令

    指令,directives,是vue非常常用的功能,在template里。

    • 都是以v-开头
    • 不是自己所为html元素,比如假设指令叫v-abc,没有这种写法,这是组件(component)的写法,组件也是vue的一个强大功能
    • 都是在html元素里写,比如
      或者
      这样子的写法居多
    • 主要都是用于决定是否渲染,怎么渲染的功能

    v-if指令

    • html元素根据v-if的结果是否为真从而决定是否渲染
    • 放在html元素里,比如div,也可以放在vue的<template>里(v-show不行)
    • 用等于号赋予表达式
    • 表达式需要用等号包裹
    • 表达式里直接写变量名称,变量不需要再用等号包裹,比如
      ,如果status的值为1,这个div就会渲染显示,否则不显示
    • 如果是字符串,可以加单引号,这么写:

      ...

    注意,cnblogs里不能直接写template标签,要用markdown的单引号包裹起来,否则后面的内容不显示。

    v-else-if和v-else指令

    • 必须和v-if指令配置使用
    • 写法为比如:
      ...

    v-for指令

    • 列表的循环渲染指令
    • 必须用in来使用
    • 比如:

    购物车

    下面通过vue实现一个购物车的增加、减少商品数量,并且自动计算总价格的功能。

    实现后的样子如下图:

    html

    html的代码如下。

      <div id="app" v-cloak>
                <!-- vue指令:v-if,放在标签中,如果为真则该标签会显示 -->
                <template v-if="list.length">
                    <table>
                        <thead>
                            <tr>
                                <th></th>
                                <th>商品名称</th>
                                <th>商品单价</th>
                                <th>商品数量</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- vue的指令:v-for -->
                            <tr v-for="(item, index) in list">
                                <td>{{ index + 1 }}</td><!-- vue都是用{{}}来使用变量 -->
                                <td>{{ item.name }}</td>
                                <td>{{ item.price }}</td>
                                <td>
                                    <!-- vue指令:v-on,绑定事件 -->
                                    <button v-on:click="handleReduce(index)">-</button>
                                    {{ item.count }}
                                    <!-- v-on的语法糖:@,一般都是用@,不写v-on -->
                                    <button @click="handleAdd(index)">+</button>
                                </td>
                                <td><button @click='handleRemove'>移除</button></td>
                            </tr>
                        </tbody>
                    </table>
                    <div>总价:¥ {{ totalPrice }}</div>
                </t emplate>
                <!-- v-if放在template标签,而v-else可以放在div,也就说不需要有标签的对应关系。
                但是需要有层次的对应关系,如果放在div外,则不生效。 -->
                <div v-else>您的购物车为空</div>
            </div>
    

    js

            var app = new Vue({
                el: '#app',
                data: {
                    // list是一个数组
                    list: [
                        // id等不需要引号
                        { id: 1, name: 'iphone XS', price: 6599, count: 1 },
                        { id: 2, name: 'iphone XR', price: 4399, count: 1 },
                        { id: 3, name: 'iphone XS Max', price: 7499, count: 1 }
                    ]
                },
                computed: {
                    totalPrice: function () {
                        return this.list[0].price * this.list[0].count;
                    }
                },
                methods: {
                    // 方法定义用:号,不能用=号
                    handleAdd: function (index) {
                        this.list[index].count++;
                    },// 方法之间必须有逗号分隔
                    handleReduce: function (index) {
                        if (this.list[index].count > 0)
                            this.list[index].count--;
                    },
                    handleRemove: function (index) {
                        // js的spilce函数:(start: number, deleteCount?: number),vscode会提示详细解释。
                        this.list.splice(index, 1);
                    }
                }
            })
    

    css

            table{
                border: 1px solid #e9e9e9;/*表格框宽度、显示、颜色*/
                border-collapse: collapse;
                border-spacing: 0;
                empty-cells: show;
            }
            th, td{/*表格头和表格体的样式*/
                padding: 8px 16px;
                border: 1px solid #e9e9e9;/*深灰色*/
                text-align: left;
                background: white;/*白色*/
            }
            th{/*表格头的样式*/
                background: #f7f7f7;/*表格头的底色:浅灰色*/
                color: #5c6b77;
                font-weight: 600;
                white-space: nowrap;
            }
    

    2019.1.6

    参考资料

    《Vue.js实现》清华大学出版社

  • 相关阅读:
    python的参数传递
    django的objects级别的权限控制
    django如何将mysql数据库转化为model
    django的orm查询使用in的保序
    多用户OFDM系统资源分配研究
    第一代到第四代多址技术:从FDMA、TDMA、CDMA到OFDMA
    Kaggle比赛总结
    4 二维数组中的查找 JavaScript
    5 替换空格 JavaScript
    简单的HTTP协议
  • 原文地址:https://www.cnblogs.com/ouyida3/p/10229269.html
Copyright © 2011-2022 走看看