uni-app入门教程(3)数据绑定、样式绑定和事件处理

CuterCorley 等级 658 0 0

@[toc]

前言

本文的内容主要包含3部分:声明并渲染变量,包括条件渲染;通过class和style定义样式并动态绑定;事件的绑定,包含了事件传参。三部分均具有动态绑定的特性。

一、模板语法及数据绑定

1.声明和渲染变量

在使用变量前,需要先声明,一般在data块中进行声明,如hello uniapp项目中index.vue中定义的title变量如下:

data() {
    return {
        title: 'Hello'
    }
},

可以在script语言块的data块中定义多个变量,并且在template语言块的视图中用{{}}调用变量,并且可以绑定多种类型的变量,包括基本数据类型、数组等。

先测试基础数据调用,index.vue如下:

<template>
    <view class="content">
        <image class="logo" src="/static/logo.png"></image>
        <view class="text-area">
            <text class="title">{{title}}</text>
        </view>
        <view class="red">
            hello-{{name}}
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello',
                name: 'Corley'
            }
        },
        onLoad() {
            console.log('index onload')
        },
        onShow() {
            console.log('index onshow')
        },
        onHide() {
            console.log('index onhide')
        },
        methods: {

        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }

    .text-area {
        display: flex;
        justify-content: center;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }
</style>

显示: uni-app入门教程(3)数据绑定、样式绑定和事件处理

可以看到,定义的title和name变量渲染到了视图中。

需要注意,声明的变量都是响应式的,即视图中渲染的结果与变量本身是绑定的,会同步变化,index.vue如下:

<template>
    <view class="content">
        <image class="logo" src="/static/logo.png"></image>
        <view class="text-area">
            <text class="title">{{title}}</text>
        </view>
        <view class="red">
            hello-{{name}}-{{age}}
        </view>
    </view>
</template>
<script>
    var _self;
    export default {
        data() {
            return {
                title: 'Hello',
                name: 'Corley',
                age: 18
            }
        },
        onLoad() {
            _self = this;
            setTimeout(function(){
                _self.age = 20
            }, 3000);
        },
        onShow() {
            console.log('index onshow')
        },
        onHide() {
            console.log('index onhide')
        },
        methods: {

        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }

    .text-area {
        display: flex;
        justify-content: center;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }
</style>

显示: uni-app入门教程(3)数据绑定、样式绑定和事件处理

可以看到,在进入onLoad阶段后,渲染的age变量也发生变化,变为20。

还可以对数组进行数据绑定,可以获取数组的单个元素及其属性,如下:

<template>
    <view class="content">
        <image class="logo" src="/static/logo.png"></image>
        <view class="text-area">
            <text class="title">{{title}}</text>
        </view>
        <view class="red">
            {{students[0]}}<br>
            {{students[0].name}}
        </view>
    </view>
</template>
<script>
    var _self;
    export default {
        data() {
            return {
                title: 'Hello',
                name: 'Corley',
                age: 18,
                students: [{
                        name: "张三",
                        age: 18
                    },
                    {
                        name: "李四",
                        age: 20
                    }
                ]
            }
        },
        onLoad() {
            _self = this;
            setTimeout(function() {
                _self.age = 20
            }, 3000);
        },
        onShow() {
            console.log('index onshow')
        },
        onHide() {
            console.log('index onhide')
        },
        methods: {

        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }

    .text-area {
        display: flex;
        justify-content: center;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }
</style>

显示: uni-app入门教程(3)数据绑定、样式绑定和事件处理

也可以使用循环来遍历数组,即使用v-for进行遍历。 index.vue如下:

<template>
    <view class="content">
        <image class="logo" src="/static/logo.png"></image>
        <view class="text-area">
            <text class="title">{{title}}</text>
        </view>
        <view v-for="(item, index) in students">
            {{index}} - {{item.name}} : {{item.age}}
        </view>
    </view>
</template>
<script>
    var _self;
    export default {
        data() {
            return {
                title: 'Hello',
                name: 'Corley',
                age: 18,
                students: [{
                        name: "张三",
                        age: 18
                    },
                    {
                        name: "李四",
                        age: 20
                    }
                ]
            }
        },
        onLoad() {
            _self = this;
            setTimeout(function() {
                _self.age = 20
            }, 3000);
        },
        onShow() {
            console.log('index onshow')
        },
        onHide() {
            console.log('index onhide')
        },
        methods: {

        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }

    .text-area {
        display: flex;
        justify-content: center;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }
</style>

显示: uni-app入门教程(3)数据绑定、样式绑定和事件处理

显然,此时遍历出了数组中的所有元素。

2.条件渲染

条件渲染是指满足某个条件才渲染某个元素,使用v-if

如下:

<template>
    <view class="content">
        <image class="logo" src="/static/logo.png"></image>
        <view class="text-area">
            <text class="title">{{title}}</text>
        </view>
        <view v-if="show1">
            show1...
        </view>
        <view v-if="show2">
            show2...
        </view>
    </view>
</template>
<script>
    var _self;
    export default {
        data() {
            return {
                title: 'Hello',
                name: 'Corley',
                age: 18,
                show1: true,
                show2: false
            }
        },
        onLoad() {
            _self = this;
            setTimeout(function() {
                _self.age = 20
            }, 3000);
        },
        onShow() {
            console.log('index onshow')
        },
        onHide() {
            console.log('index onhide')
        },
        methods: {

        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }

    .text-area {
        display: flex;
        justify-content: center;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }
</style>

显示: uni-app入门教程(3)数据绑定、样式绑定和事件处理

此时根据v-if中传的值判断是否渲染。

:hidden属性用来定义是否隐藏某个元素,如下:

<template>
    <view class="content">
        <image class="logo" src="/static/logo.png"></image>
        <view class="text-area">
            <text class="title">{{title}}</text>
        </view>
        <view :hidden="show1">
            show1...
        </view>
        <view :hidden="show2">
            show2...
        </view>
    </view>
</template>
<script>
    var _self;
    export default {
        data() {
            return {
                title: 'Hello',
                name: 'Corley',
                age: 18,
                show1: true,
                show2: false
            }
        },
        onLoad() {
            _self = this;
            setTimeout(function() {
                _self.age = 20
            }, 3000);
        },
        onShow() {
            console.log('index onshow')
        },
        onHide() {
            console.log('index onhide')
        },
        methods: {

        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }

    .text-area {
        display: flex;
        justify-content: center;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }
</style>

显示: uni-app入门教程(3)数据绑定、样式绑定和事件处理

可以看到,v-if:hidden的效果相反,但是原理上还是有一定区别: v-if是根据条件决定是否渲染:hidden会渲染但根据条件决定是否展示,可以根据具体需要进行选择。

二、class和style绑定

前面已经提到过,可以在template语言块的某个标签中通过style属性直接定义样式,也可以在style语言块中通过选择器定义样式,再在template语言块中使用。

为节约性能,可以将Class与Style的表达式通过compiler硬编码到uni-app中,通过条件判断来决定是否显示某个样式。

1.class语法

class支持的语法方式如下:

<!-- 1 -->
<view class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">111</view>
<!-- 2 -->
<view class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">222</view>
<!-- 3 -->
<view class="static" v-bind:class="[{ active: isActive }, errorClass]">333</view>
<!-- 4 -->
<view :class="{ active: isActive }">444</view>
<!-- 5 -->
<view class="static" :class="[activeClass, errorClass]">555</view>

其中,前3种为完整形式,后2种为简写形式; isActive ? activeClass : ''三元运算符

index.vue如下:

<template>
    <view class="content">
        <image class="logo" src="/static/logo.png"></image>
        <view class="text-area">
            <text class="title">{{title}}</text>
        </view>
        <view :class="{'red' : isRed}">
            class bind 2...
        </view>
        <view :class="[isBlue ? 'blue' : 'red']">
            class bind 3...
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                title: 'Hello',
                name: 'Corley',
                age: 18,
                isRed: true,
                isBlue: true
            }
        },
        onLoad() {
        },
        onShow() {
            console.log('index onshow')
        },
        onHide() {
            console.log('index onhide')
        },
        methods: {

        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }

    .text-area {
        display: flex;
        justify-content: center;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }
    .blue {
        color: #007AFF;
    }
</style>

显示: uni-app入门教程(3)数据绑定、样式绑定和事件处理

可以看到,在进行编译选然后,微信开发者工具中wxml显示的是被渲染后的class值。

2.style语法

style 支持的语法如下:

<!-- 1 -->
<view v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">111</view>
<!-- 2 -->
<view v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">222</view>
<!-- 3 -->
<view :style="{ color: activeColor, fontSize: fontSize + 'px' }">333</view>
<!-- 4 -->
<view :style="[{ color: activeColor, fontSize: fontSize + 'px' }]">444</view>

其中,前2种为完整形式,后2种为简写形式。

index.vue如下:

<template>
    <view class="content">
        <image class="logo" src="/static/logo.png"></image>
        <view class="text-area">
            <text class="title">{{title}}</text>
        </view>
        <view style="font-size: 10px;">
            style static...
        </view>
        <view :style="{fontSize: fontSize+'px'}">
            class dynamic...
        </view>
    </view>
</template>
<script>
    var _self;
    export default {
        data() {
            return {
                title: 'Hello',
                name: 'Corley',
                age: 18,
                fontSize: 20
            }
        },
        onLoad() {
            _self = this;
            setTimeout(function(){
                _self.fontSize = 30;
            }, 3000)
        },
        onShow() {
            console.log('index onshow')
        },
        onHide() {
            console.log('index onhide')
        },
        methods: {

        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }

    .text-area {
        display: flex;
        justify-content: center;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }
    .blue {
        color: #007AFF;
    }
</style>

显示: uni-app入门教程(3)数据绑定、样式绑定和事件处理

显然,样式可以动态发生变化。

需要注意,uni-app不支持 Vue官方文档中Class 与 Style 绑定 中的 classObject 和 styleObject 语法,但是可以用 computed 方法生成 class 或者 style 字符串,插入到页面中,如下:

<template>
    <view>
        <!-- 支持 -->
        <view class="container" :class="computedClassStr"></view>
        <view class="container" :class="{active: isActive}"></view>
        <!-- 不支持 -->
        <view class="container" :class="computedClassObject"></view>
    </view>    
</template>

关于Class和Style动态绑定的进一步讲解和更多用法可参考uni-app入门教程(8)在uni-app中使用Vue

3.案例--动态菜单切换

本案例实现动态切换导航栏。

先展示横向排列的导航栏,index.vue如下:

<template>
    <view>
        <view v-for="(item, index) in menus" class="menu">
            {{item}}
        </view>
    </view>
</template>
<script>
    var _self;
    export default {
        data() {
            return {
                menus: [
                    '新闻', '汽车', '读书'
                ]
            }
        },
        onLoad() {

        },
        onShow() {
            console.log('index onshow')
        },
        onHide() {
            console.log('index onhide')
        },
        methods: {

        }
    }
</script>

<style>
    .menu {
        padding: 10px;
        float: left;
        margin: 5px;
        line-height: 36px;
    }
</style>

显示: uni-app入门教程(3)数据绑定、样式绑定和事件处理

此时已经可以将导航栏横向展示了。

再实现当前的导航栏显示不一样的颜色,如下:

<template>
    <view>
        <view v-for="(item, index) in menus" class="menu" :class="[activeIndex==index?'menuActive':'']">
            {{item}}
        </view>
    </view>
</template>
<script>
    var _self;
    export default {
        data() {
            return {
                menus: [
                    '新闻', '汽车', '读书'
                ],
                activeIndex: 0
            }
        },
        onLoad() {

        },
        onShow() {
            console.log('index onshow')
        },
        onHide() {
            console.log('index onhide')
        },
        methods: {

        }
    }
</script>

<style>
    .menu {
        padding: 10px;
        float: left;
        margin: 5px;
        line-height: 36px;
    }
    .menuActive {
        color: #FF0000 !important;
    }
</style>

显示: uni-app入门教程(3)数据绑定、样式绑定和事件处理

此时,第1个导航栏变为红色。

进一步实现点击时,颜色动态变化,如下:

<template>
    <view>
        <view v-for="(item, index) in menus" class="menu" :class="[activeIndex==index?'menuActive':'']" @click="menuClick" :id="index">
            {{item}}
        </view>
    </view>
</template>
<script>
    var _self;
    export default {
        data() {
            return {
                menus: [
                    '新闻', '汽车', '读书'
                ],
                activeIndex: 0
            }
        },
        onLoad() {
            _self = this
        },
        onShow() {
            console.log('index onshow')
        },
        onHide() {
            console.log('index onhide')
        },
        methods: {
            menuClick: function(e){
                var aid = e.target.id;
                console.log(aid);
                _self.activeIndex = aid;
            }
        }
    }
</script>

<style>
    .menu {
        padding: 10px;
        float: left;
        margin: 5px;
        line-height: 36px;
    }
    .menuActive {
        color: #FF0000 !important;
    }
</style>

使用了事件来达到动态切换的效果。

显示: uni-app入门教程(3)数据绑定、样式绑定和事件处理

可以看到,点击不同的导航栏实现了颜色同步变化的效果。

三、事件和事件绑定

1.uni-app事件

事件映射表定义了WEB事件和uni-app事件之间的对应关系,具体如下: Web事件|uni-app事件|说明 -----|-----|----- click| 'tap'|被点击 touchstart|'touchstart'|手指开始在元素上触摸时 touchmove|'touchmove'|移动 touchcancel|'touchcancel'|取消 touchend|'touchend'|结束 tap|'tap'|单机 longtap|'longtap'|长按 input|'input'|输入 change|'change'|改变 submit|'submit'|表单提交 blur|'blur'|失焦 focus| 'focus'|聚焦 reset|'reset'|表单重置 confirm|'confirm'|确认 columnchange|'columnchange'|字段变化 linechange| 'linechange'|行比那花 error|'error'|错误 scrolltoupper| 'scrolltoupper'|滚动到顶部 scrolltolower|'scrolltolower'|滚动到底部 scroll|'scroll'|滚动

说明: (1)在 input 和 textarea 中 change 事件会被转为 blur 事件; (2)列表中没有的原生事件也可以使用,例如map组件的regionchange 事件直接在组件上添加@regionchange修饰即可,同时这个事件也非常特殊,它的 event type 有 begin 和 end 两个,导致我们无法在handleProxy 中区分到底是什么事件,所以在监听此类事件的时候同时监听事件名和事件类型,即<map @regionchange="functionName" @end="functionName" @begin="functionName"><map>; (3)由于平台的差异,bind 和 catch 事件同时绑定时,只会触发 bind,catch 不会被触发,使用时需要注意。 (4)件修饰符:

  • 使用stop会阻止冒泡,但是同时绑定了一个非冒泡事件,会导致该元素上的 catchEventName 失效;
  • prevent 可以直接结束事件,因为uni-app里没有什么默认事件,比如 submit 并不会跳转页面;
  • self 没有可以判断的标识;
  • once 也不能做,因为uni-app没有 removeEventListener, 虽然可以直接在 handleProxy 中处理,但是并不优雅;

(5)按键修饰符: uni-app运行在手机端,没有键盘事件,所以不支持按键修饰符。

2.事件绑定

使用@对元素进行事件绑定,当事件被触发时,会导致相应的操作。

index.vue如下:

<template>
    <view>
        <view class="demo" @click="clickTest" @longtap="longtap"></view>
    </view>
</template>
<script>
    var _self;
    export default {
        data() {
            return {
            }
        },
        onLoad() {
            _self = this
        },
        onShow() {
            console.log('index onshow')
        },
        onHide() {
            console.log('index onhide')
        },
        methods: {
            clickTest : function(e){
                console.log("click")
            },
            longtap : function(e){
                console.log("longtap")
            },
        }
    }
</script>

<style>
    .demo {
        width: 600rpx;
        height: 600rpx;
        background: #DD524D;
    }
</style>

显示: uni-app入门教程(3)数据绑定、样式绑定和事件处理

可以看到,在进行点击和长按时,会触发不同的事件、执行不同的操作。

可以在小程序中观察对应事件对象,并利用此对象获取更多信息。

3.事件传参

在触发事件时,还可以传入动态参数。

如下:

<template>
    <view>
        <view v-for="(item, index) in students" class="persons" @click="menuClick" v-bind:id="index">{{index}} - {{item.name}}</view>
    </view>
</template>
<script>
    var _self;
    export default {
        data() {
            return {
                students: [{
                        name: "张三",
                        age: 18
                    },
                    {
                        name: "李四",
                        age: 20
                    }
                ]
            }
        },
        onLoad() {
            _self = this
        },
        onShow() {
            console.log('index onshow')
        },
        onHide() {
            console.log('index onhide')
        },
        methods: {
            menuClick: function(e) {
                console.log(e);
                console.log(e.target.id);
            },
        }
    }
</script>

<style>
    .demo {
        width: 600rpx;
        height: 600rpx;
        background: #DD524D;
    }
</style>

显示: uni-app入门教程(3)数据绑定、样式绑定和事件处理

可以看到,在进行点击时,控制台打印出了事件对象和e.target.id的值。

再如:

<template>
    <view>
        <view class="demo" id="outid" @click="clickTest" @longtap="longtap">
            <view id="inid" style="width: 400rpx;height: 400rpx;background: #007AFF;"></view>
        </view>
    </view>
</template>
<script>
    var _self;
    export default {
        data() {
            return {
            }
        },
        onLoad() {
            _self = this
        },
        onShow() {
            console.log('index onshow')
        },
        onHide() {
            console.log('index onhide')
        },
        methods: {
            clickTest : function(e){
                console.log(e.currentTarget.id)
                console.log(e.target.id)
            },
            longtap : function(e){
                console.log("longtap")
            },
        }
    }
</script>

<style>
    .demo {
        width: 600rpx;
        height: 600rpx;
        background: #DD524D;
    }
</style>

显示: uni-app入门教程(3)数据绑定、样式绑定和事件处理

可以看到,在点击外部红色区域时,打印的两个id值相同; 而在点击内部蓝色区域时,e.target变为内部的view元素,所以打印出的也是inid,所以在使用属性传参时尽量使用e.currentTarget

总结

在uni-app中,不论是对于数据(变量),还是对于以class或style定义的样式,亦或定义的事件,都可以进行动态绑定、同步变化,这些特性有利于更高效地开发出所需功能,大大降低了开发成本。

本文原文首发来自博客专栏移动应用开发,由本人转发至https://www.helloworld.net/p/D0lLu3LcLMCVO,其他平台均属侵权,可点击https://blog.csdn.net/CUFEECR/article/details/111240593查看原文,也可点击https://blog.csdn.net/CUFEECR浏览更多优质原创内容。

收藏
评论区

相关推荐

Java判断一个数是不是快乐数
快乐数的定义: 快乐数(happy number)有以下的特性: 在给定的进位制下,该数字所有数位(digits)的平方和,得到的新数再次求所有数位的平方和,如此重复进行,最终结果必为1。 以十进制为例: 2 8 → 2²8²68 → 6²8²100 → 1²0²0²1 3 2 → 3²2²13 → 1²3²10 → 1²0²1 3 7 → 3
3 手写Java HashMap核心源码
手写Java HashMap核心源码 上一章手写LinkedList核心源码,本章我们来手写Java HashMap的核心源码。 我们来先了解一下HashMap的原理。HashMap 字面意思 hash map,map是映射的意思,HashMap就是用hash进行映射的意思。不明白?没关系。我们来具体讲解一下HashMap的原理。 HashMap
mysql表和字段的操作
(3)mysql表和字段的操作 (3)mysql表和字段的操作 创建表 create table name( id int, student varchar(20) ); 查看表结构 常用 describe 表名; 修改表名 老表 rename 新表 ALTER TABLE tb\_men
面试官在“逗”你系列:连续子数组的最大和或最小和
前言 本文题目是“连续子数组的最大和或最小和”。 话不多说,开始“打怪”修炼... 一、理解题目 以“连续子数组的最大和”为例,相当于我们在数组中,计算连续的子数组的和,找寻最大值。如在数组3, 2, 1, 2, 4, 6, 5中连续子数组的最大和为:3 (2) 1 2 4 8 输入:3, 2, 1, 2, 4, 6,
python百题大冲关-Fizz Buzz 经典问题
挑战介绍 给定一个整数 num,从 1 到 num 按照下面的规则返回每个数: 如果这个数被 3 整除,返回 'Fizz'。 如果这个数被 5 整除,返回 'Buzz'。 如果这个数能同时被 3 和 5 整除,返回 'FizzBuzz'。 如果这个数既不能被 3 也不能被 5 整除,返回这个数字的字符串格式。 挑战内容
C语言入门系列之3.顺序程序设计和输入输出
从程序流程的角度来看,程序可以分为三种基本结构,即顺序结构、分支结构、循环结构,这三种基本结构可以组成各种复杂程序,C语言提供了多种语句来实现这些程序结构。同时C语言提供的输入输出的函数为IO提供了方便的工具。 一、C语句介绍 1.C基本语句C程序的执行部分是由语句组成的,程序的功能也是由执行语句实现的。C语句可分为以下五类: 表达式语句表达式语句:
Django+Vue开发生鲜电商平台之3.数据模型设计和资源导入
永远不要跟别人比幸运,我从来没想过我比别人幸运,我也许比他们更有毅力,在最困难的时候,他们熬不住了,我可以多熬一秒钟、两秒钟。 ——马云Github和Gitee代码同步更新:;。在正式开发项目之前,要确定数据库和表结构。 一、项目初始化在虚拟环境安装好之后,需要安装Django和Django REST framework,直接
uni-app入门教程(3)数据绑定、样式绑定和事件处理
@toc 前言本文的内容主要包含3部分:声明并渲染变量,包括条件渲染;通过class和style定义样式并动态绑定;事件的绑定,包含了事件传参。三部分均具有动态绑定的特性。 一、模板语法及数据绑定 1.声明和渲染变量在使用变量前,需要先声明,一般在data块中进行声明,如hello uniapp项目中index.vue中定义的title变
Vue 3 计划放弃支持 IE11
Vue.js 作者尤雨溪就 Vue 3 支持 IE11 的计划提交了新提案。提案摘要:1. Vue 3 将不会支持 IE11 2. 原定投入 Vue 3 IE11 支持的精力将投入给 2.7,移植 3.x 兼容的新功能,包括: Composition API \<script setup\ 以及其它新的单文件组件特性
Compose Weekly #3:Bloom
本文同步发表于我的微信公众号,在微信搜索 OpenCV or Android 即可关注。 前言第三周挑战赛是速度比拼,按照官方发出的设计图最快完成且符合所有设计规范者胜出。不仅要做得快,还要做得好,奖品自然不会少。这一期的奖品是:Google Pixel 5。深知干不过业界大佬们,花个半天纯当练手完成题目。 设计图 设计风格 界面导航 界面标注 完整设计图:
人工智能数学基础1:三角函数的定义、公式及固定角三角函数值
一、三角函数的定义及名称在直角三角形中,当平面上的三点A、B、C的连线,AB、AC、BC,构成一个直角三角形,其中∠ACB为直角。对∠BAC(在此简称为θ)而言,对边(opposite)aBC、斜边(hypotenuse)cAB、邻边(adjacent)bAC,则三角函数定义如下:二、三角函数的变化趋势及图像  正弦值在 \[2kππ/2,2kπ+π/2
关于根据颜色刷选图像内容的问题
在CSDN本人博文《OpenCVPython图像处理:用inRange刷选图像中指定颜色对象案例》(请点击文章底部最下方的“阅读原文”跳转CSDN阅读原文)中介绍了根据颜色刷选图像内容相关的概念及实现,介绍了通过使用inRange在HSV颜色空间中识别制定颜色的图像内容,文中概要介绍了HSV颜色空间中进行制定颜色对象识别的要点,使用的inRange函数的语法
面试系列-3 限流场景实践
英国弗兰明曾说过一句话:“不要等待运气降临,应该去努力掌握知识。” 1 前言大家好,我是阿沐!你的收获便是我的喜欢,你的点赞便是对我的认可。今天呢,我们就不聊redis面试系列,我们一起来聊一聊限流操作以及使用场景。很奇怪哈,为啥突然转变画风了,之前一篇文章中提到 redis的限流操作,并没有实际给小伙伴们演示以及场景的使用演练。所以呢,既然有人私聊问我了,
Python 练手 &quot;小例子&quot; 闯关60题!
一、 数字1 求绝对值绝对值或复数的模In [1]: abs(6)Out[1]: 62 进制转化十进制转换为二进制: In [2]: bin(10)Out[2]: '0b1010'十进制转换为八进制: In [3]: oct(9)Out[3]: '0o11'十进制转换为十六进制: In [4]: hex(15)Out[4]: '0xf'3 整数和ASCII互
Python基础3——异常
11 异常 11.1 异常种类异常种类 没必要记,不懂的话直接去百度即可 AttributeError 试图访问一个对象没有的属性 IOError 输入、输出异常 ImportError 无法引入模块或者包 IndentationError 语法错误,代码缩进问题 IndexError 数组越界 KeyError 字典中不存在的键 KeyboardIn