【零基础学会uniapp系列】2、 指令

指令

指令是带有 v- 前缀的特殊属性。

• 指令属性的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。
• 指令的作用是，当表达式的值改变时，动态改变DOM元素的内容。
• 一些指令能够接收一个“参数”，在指令名称之后以冒号（ : ）表示。

v-bind

动态地绑定一个或多个属性，或一个组件 属性 到表达式。

• v-bind缩写为‘ : ’
• 在绑定 属性 时，属性 必须在子组件中声明。
• 可以用修饰符指定不同的绑定类型。

绑定可以直接应用到 class和style，可以实现动态的切换状态。 具体可参考Class 与 Style 绑定

<template>
        <view v-bind:class="{active: isActive}">背景颜色测试</view>
</template>

<script>
        export default {
                data() {
                        return {
                                isActive: false,
                        }
                }
    }
</script>
<style>
.active {
    background-color: red;
}
</style>
<template>
<view :class="[isred ? 'bg-red' : 'bg-blue']">三元表达式背景色测试</view>
</template>
<script>
    export default {
                data() {
                        return {
                                isred: false
                        }
                }
    }
</script>
<style>
.bg-red {
    background-color: red;
}

.bg-blue {
    background-color: blue;
}
</style>
<template>
        <view v-bind:style="{color: activeColor, fontSize: fontSize + 'px' , background:isred ? 'red' : '' }">测试文本
        </view>
</template>

<script>
        isred: false,
        fontSize: 30,
        activeColor: 'blue'
</script>

v-on

v-on 指令，它用于监听 DOM 事件。v-on缩写为‘ home.php?mod=space&uid=70631 ’，下文简称为 @事件

<!-- 完整语法 -->
<view v-on:click="doSomething">点击</view>    
<!-- 缩写 -->
<view @click="doSomething">点击</view>

<script>
    export default {
        ...
    methods: {
                        doSomething(){
                console.log("被点击了");
                this.isActive = false;
                this.isred =true;
                this.fontSize = 10;
                this.activeColor="white";
            }
        }
    }
</script>

不常用的内容：

v-once

v-html

课程视频教程：

02. 指令

\

Uniapp问答互助学习交流群：326576256

旨在相互学习交流，相互帮助解答使用Uniapp时遇到的问题