Vue3 —— 指令

指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。Vue中所有带有v-开头的都是Vue的内置指令。
常用指令
v-text         用于显示文本
v-html        用于展示文本 <fontstyle=“color:#DD5145”>不建议使用
v-show      用于控制元素的显示与隐藏(相当于为元素添加 display:none; 样式)
v-if             用于控制元素的显示与隐藏(动态的向DOM树内添加或者删除DOM元素)
v-else if    表示v-if为false执行的指令,可以链式调用
v-on          可简写为 @ ,用来给元素绑定事件
v-bind       可简写为 : 用来绑定元素的属性Attr
v-model      主要用于表单的双向绑定
v-for          用来遍历元素

示例:

v-show:

<script setup lang="ts">
import { ref } from 'vue';
let whether = ref<boolean>(true)
const getWherther = ()=>{
    whether.value = !whether.value
}
</script>

<template>
    <button @click="getWherther">点击 显示/隐藏 文本内容</button>
    <div v-show="whether">
        <h2>嘿嘿哈哈嘿嘿</h2>
    </div>
</template>

V-if /v-else if / v-else

<script setup lang="ts">
import { ref } from 'vue';
let whether = ref<boolean>(true)
const getWherther = () => {
    whether.value = !whether.value
}
</script>

<template>
    <div>
        <button @click="getWherther">点击 显示/隐藏 文本内容</button>
        <div v-if="whether">
            <h2>嘿嘿哈哈嘿嘿</h2>
        </div>
        <div v-else="!whether">
            <h2>笑不出来了</h2>
        </div>
    </div>
</template>

注: v-show 与 v-if 都用于控制元素的显示与隐藏,区别在于:v-show 操作样式,v-if 操作 DOM ;若频繁切换建议使用 v-show

v-on

<script setup lang="ts">
import { ref } from 'vue';
let whether = ref<boolean>(true)
const getWherther = () => {
    whether.value = !whether.value
}
</script>

<template>
    <div>
        <h3 @click="getWherther">{{whether}}</h3>
    </div>
</template>

v-bind

在这里插入代码片
```<script setup lang="ts">
import { ref } from 'vue';
let msg = ref<string>('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0514%2F1eb45120g00qt3hof0395d000cn00a0p.gif&refer=http%3A%2F%2Fdingyue.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651069469&t=ecce13acfde1884469164510ea8a12ff')
</script>

<template>
    <div>
        <img :src="msg" alt="图片">
    </div>
</template>
## v-model

```javascript
在这里插入代码片

v-model

<script setup lang="ts">
import { reactive, ref } from 'vue';
let text= ref<string>('')
</script>

<template>
   
<div>
    <input type="text" v-model="text">
</div>
</template>

v-for

<script setup lang="ts">
import { reactive, ref } from 'vue';
let masgs = reactive<string[]>([
    'https://pic.rmb.bdstatic.com/0ce03a74dff864fcd80b4fac128aed168677.gif',
    'https://img0.baidu.com/it/u=1177050093,2561561890&fm=253&fmt=auto&app=138&f=GIF?w=455&h=360',
    'https://img0.baidu.com/it/u=2377911498,19241535&fm=253&fmt=auto&app=138&f=GIF?w=220&h=176'
])
</script>

<template>
    <div class="image">
        <div v-for="(item,index) in masgs" :key="index">
            <img :src="item" alt="图片">
        </div>
    </div>
</template>

<style scoped lang="less">
.image{
    display: flex;
    justify-content: center;
    img{
        width: 200px;
        height: 200px;
    }
}
</style>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3中的:class指令用于动态地绑定CSS类。在Vue3中,有三种方式来使用:class指令。 第一种是直接绑定一个字符串,这个字符串可以是一个类名,也可以是多个类名组成的字符串,用空格隔开。例如,可以这样写:<div class="text" :class="'active text-bg'">第一种class绑定字符串形式</div>,这样就会给这个元素添加active和text-bg这两个类。 第二种是使用对象的形式来绑定class。可以通过在对象中设置键值对的方式来决定是否添加某个类名。例如:<div class="text" :class="{active: isActive, 'text-bg': !isActive}">第二种class绑定对象形式</div>,这样根据isActive的值来决定是否添加active类,如果isActive为真,则添加active类,否则添加text-bg类。 第三种是使用数组的形式来绑定class。可以将多个类名放在一个数组中。例如:<p :class="[message, activeClass]">hello</p>,这样就会将message和activeClass这两个变量的值作为类名添加到元素上。 需要注意的是,数组语法在开发中并不常用,因为它不太方便控制class。而使用对象的形式能更灵活地根据条件来动态绑定类名。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [VUE3 class 用法](https://blog.csdn.net/weixin_46730573/article/details/125832119)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [Vue3基础+代码语法+例子大全(三)——Class与Style绑定](https://blog.csdn.net/m0_46610349/article/details/126641434)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值