【零基础学会uniapp】第二课：指令

【零基础学会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缩写为‘ @ ’，下文简称为 @事件

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

本课引用链接：

• https://uniapp.dcloud.io/vue-basics?id=%e6%8c%87%e4%bb%a4
• https://uniapp.dcloud.io/vue-basics?id=class-%e4%b8%8e-style-%e7%bb%91%e5%ae%9a