当前位置：易语言资源网 > 易语言源码 > 帖子内容

【零基础学会uniapp】第二课：指令 [复制链接]

易语言源码

1750

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缩写为‘ @ ’，下文简称为 @事件

<!-- 完整语法 -->
<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>