Vue2指令解析

kelin5200

已于 2023-12-08 14:31:42 修改

阅读量992

点赞数 19

分类专栏： Vue基础学习文章标签：前端 vue 学习

于 2023-11-24 15:41:16 首次发布

本文链接：https://blog.csdn.net/lkl111112111/article/details/134506285

版权

Vue基础学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

v-text/v-html

v-text：纯文本显示

v-html：会被html解析的文本

v-show/v-if

v-show：根据表达式结果"ture/false"控制css的display：none 属性切换显示/隐藏；适用于频繁切换显示/隐藏的场景。

v-if（条件渲染）：根据表达式结果"ture/false"控制dom元素的创建和删除；适用不频繁切换显示/隐藏的场景。

v-else/v-else-if

v-else：辅助v-if进行判断渲染，需紧挨着v-if使用

v-else-if：需要多次if条件判断时使用，没有下一个判断条件时以v-else结尾。

v-on

注册事件（添加监听+处理逻辑）

语法：①v-on:事件名="内联语句"

②v-on:事件名="methods中的函数名"

语法简写：v-on:事件名 → @事件名

v-bind

动态设置html标签属性（src、url、title...）绑定数据和元素属性

语法：v-bind:属性名="表达式"；简写：:属性名="表达式"

<router-link :to="item.link">{{item.title}}</router-link>

v-bind样式控制 - class

语法：:class="{对象}/[数组]"

对象 → 键：类名；值：布尔值，若值为true，则添加
适用场景（一个类名，来回切换：导航栏、选项卡）
```
<div class="box" :class="{类名1: 布尔值1, 类名2: 布尔值2}"></div>
```
数组 → 数组中所有类添加至盒子（标签），本质：class列表
适用场景（批量添加删除类）
```
<div class="box" :class="[类名1,类名2,类名3]"></div>
```

v-bind样式控制 - style

语法：style="样式对象

样式对象：属性值可以与变量进行操作
适用场景（某个具体属性的动态设置）
```
<div class="box" :style="{CSS属性名1: CSS属性值, CSS属性值2: CSS属性值}"></div>
```

v-for

基于数据循环，多次渲染dom元素，用于：数组、对象、数字

语法：v-for="item in 数组名"；v-for="(item,index) in 数组名"

item：每一项数据，index：下标

:key语法：v-for="item in 数组名" :key="表达式"

key的值为字符串/数字；有唯一性；推荐使用id作为key；不推荐使用index

添加:key为元素添加唯一标识，Vue进行列表项正确排序复用

不添加:key，相对位置的dom元素保留其样式、属性...

<template>
  <div class="navbar">
    <div class="nav-links">
      <router-link :to="item.link" v-for="item in navLink" :key="item.id">{{item.title}}</router-link>
    </div>
  </div>
</template>
<script>
export default {
  // 在这里可以加入需要的数据和方法
  data() {
    return {
      navLink: [
        { id: '1', link: '/home', title: '论坛主页'},
        { id: '2', link: '#', title: '关于我们'},
        { id: '3', link: '#', title: '站内服务'},
        { id: '4', link: '#', title: '业务介绍'},
        { id: '5', link: '#', title: '产品展示'},
        { id: '6', link: '#', title: '联系我们'}
      ]
    }
  }
};
</script>