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

项目部002

【零基础学会uniapp系列】1、一个新的vue文件
https://bbs.125.la/forum.php?mod=viewthread&tid=14702528

---

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

---

本课引用链接：

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

@ 课件下载、更多教程、遇到问题或者进行交流，请到： https://bbs.125.la/forum.php?mod=forumdisplay&fid=226 进行发帖交流

加QQ群：[326576256](

视频教程：
【点击前往TV网查看】


课程课件和源码下载：【从资源网下载】
从GIT关注：
https://gitee.com/JYtechnology/uniapp-learn