1、绑定样式

没啥好说的、我觉得还没直接引入外部写好的css样式方便（个人想法）

1.1 基础知识

绑定样式：

  • 1、class样式
    写法:class=“xxx” xxx可以是字符串、对象、数组。
    字符串写法适用于：类名不确定，要动态获取。
    对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
    数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
  • 2、style样式
    :style="{fontSize: xxx}“其中xxx是动态值。
    :style=”[a,b]"其中a、b是样式对象。

1.2 代码实例

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <title>标题</title>
  7.     <!-- 引入vue -->
  8.     <script type="text/javascript" src="../js/vue.js"></script>
  9.     <style>
  10.         .basic {
  11.             width: 400px;
  12.             height: 100px;
  13.             border: 1px solid black;
  14.         }
  16.         .happy {
  17.             border: 4px solid red;
  18.             ;
  19.             background-color: rgba(255, 255, 0, 0.644);
  20.             background: linear-gradient(30deg, yellow, pink, orange, yellow);
  21.         }
  23.         .sad {
  24.             border: 4px dashed rgb(2, 197, 2);
  25.             background-color: gray;
  26.         }
  28.         .normal {
  29.             background-color: skyblue;
  30.         }
  32.         .atguigu1 {
  33.             background-color: yellowgreen;
  34.         }
  36.         .atguigu2 {
  37.             font-size: 30px;
  38.             text-shadow: 2px 2px 10px red;
  39.         }
  41.         .atguigu3 {
  42.             border-radius: 20px;
  43.         }
  44.     </style>
  45. </head>
  47. <body>
  48.     <div id="App">
  49.         <!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
  50.         <div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br /><br />
  52.         <!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
  53.         <div class="basic" :class="classArr">{{name}}</div> <br /><br />
  55.         <!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
  56.         <div class="basic" :class="classObj">{{name}}</div> <br /><br />
  58.         <!-- 绑定style样式--对象写法 -->
  59.         <div class="basic" :style="styleObj">{{name}}</div> <br /><br />
  60.         <!-- 绑定style样式--数组写法 -->
  61.         <div class="basic" :style="styleArr">{{name}}</div>
  63.     </div>
  64.     <script type="text/javascript">
  65.         Vue.config.productionTip = false  //设置为 false 以阻止 vue 在启动时生成生产提示
  67.         //创建Vue实例
  68.         new Vue({
  69.             el: '#App',
  70.             data: {
  71.                 value: "Vue",
  72.                 name: 'ZYZ',
  73.                 mood: 'normal',
  74.                 classArr: ['atguigu1', 'atguigu2', 'atguigu3'],
  75.                 classObj: {
  76.                     atguigu1: false,
  77.                     atguigu2: false,
  78.                 },
  79.                 styleObj: {
  80.                     fontSize: '40px',
  81.                     color: 'red',
  82.                 },
  83.                 classObj: {
  84.                     atguigu1: false,
  85.                     atguigu2: false,
  86.                 },
  87.                 styleObj2: {
  88.                     backgroundColor: 'orange'
  89.                 },
  90.                 styleArr: [
  91.                     {
  92.                         fontSize: '40px',
  93.                         color: 'blue',
  94.                     },
  95.                     {
  96.                         backgroundColor: 'gray'
  97.                     }
  98.                 ]
  99.             },
  100.             methods: {
  101.                 changeMood() {
  102.                     const arr = ['happy', 'sad', 'normal']
  103.                     const index = Math.floor(Math.random() * 3)
  104.                     this.mood = arr[index]
  105.                 }
  106.             },
  107.         })
  108.     </script>
  110. </body>
  112. </html>

1.3 测试效果


2、条件渲染

2.1 基本知识

条件渲染：
1、v-if 写法：

  • (1)、v-if=“表达式”
  • (2)、v-else-if=“表达式”
  • (3)、v-else=“表达式”

适用于：切换频率较低的场景。
特点：不展示的DOM元素直接被移除。
注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。（如果结构打断、打断后的流程不在执行）

2、v-show写法：

  • v-show=“表达式”

适用于：切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

3、备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

2.2 代码实例

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <title>标题</title>
  7.     <!-- 引入vue -->
  8.     <script type="text/javascript" src="../js/vue.js"></script>
  9. </head>
  11. <body>
  13.     <div id="App">
  14.         <!-- 使用v-show做条件渲染 -->
  15.         <h1 v-show="false">欢迎茶颜悦色的小主：{{name}}</h1>
  16.         <h1 v-show="flag">欢迎茶颜悦色的小主(flag)：{{name}}</h1>
  17.         <h1 v-show="1 === 1">欢迎茶颜悦色的小主(表达式)：{{name}}</h1>
  19.         <!-- 使用v-if做条件渲染 -->
  20.         <h2 v-if="false">欢迎来到{{name}}</h2>
  21.         <h2 v-if="1 === 1">欢迎来到{{name}}</h2>
  23.         <h2>当前的n值是:{{num}}</h2>
  24.         <button @click="num++">点我n+1</button>
  25.         <!-- v-else和v-else-if -->
  26.         <div v-if="num === 1">Angular</div>
  27.         <div v-else-if="num === 2">React</div>
  28.         <div v-else-if="num === 3">Vue</div>
  29.         <div v-else>哈哈</div>
  31.         <!-- v-if与template的配合使用 -->
  32.         <template v-if="num === 1">
  33.             <h2>你好呀</h2>
  34.             <h2>懒羊羊</h2>
  35.             <h2>灰太狼</h2>
  36.         </template>
  38.     </div>
  39.     <script type="text/javascript">
  40.         Vue.config.productionTip = false  //设置为 false 以阻止 vue 在启动时生成生产提示
  42.         //创建Vue实例
  43.         const vm = new Vue({
  44.             el: '#App',
  45.             data: {
  46.                 flag: true,
  47.                 value: "Vue",
  48.                 name: "zyz",
  49.                 num: 0
  50.             }
  51.         })
  52.     </script>
  54. </body>
  56. </html>

2.3 测试效果


Vue学习之--------绑定样式、条件渲染、v-show和v-if的区别（2022/7/12）的更多相关文章

  1. vue.js选择if（条件渲染）详解

    vue.js选择if(条件渲染)详解 一.总结 一句话总结: v-if <!DOCTYPE html> <html lang="en"> <head& ...

  2. vue 自学笔记(4): 样式绑定与条件渲染

    一:对象绑定 Vue 对于页面的样式加载也有独特的方式,按照 Vue 提供的方式,我们可以轻松的控制它们的呈现. 假使我们要实现点击 div 变色 Vue 提供的样式方案的本质是对元素节点进行属性的绑 ...

  3. vue class与style绑定、条件渲染、列表渲染

    列表渲染 根据我例子的需要,先来说下,列表渲染使用到的是v-for指令,需要使用 item in items 形式的特殊语法,items 是源数据数组并且 item 是数组元素迭代的别名,具体使用方法 ...

  4. Vue学习之路6-条件渲染

    条件指令 所谓条件指令是指满足某个条件时执行哪部分代码,不满足条件时执行哪部分条件代码.vue条件指令有v-if,v-else-if,v-else三个,v-if条件渲染用来指示元素是否移除或者插入,根 ...

  5. vue中v-bind绑定样式

    近来发现v-bind绑定样式的两个好玩的栗子 可以直接绑定到一个样式对象,让模板更清晰: <div id="app"> <div v-bind:style=&qu ...

  6. Vue知识整理10：条件渲染（v-if v-show）

    在Vue中使用v-if等条件实现条件的判断来实现对象的显示. 也可以采用 v-show条件来实现对象的显示.

  7. Vue学习之--------Scoped样式（2022/8/1）

    1.场景 一个页面开发团队进行页面的开发设计.无可避免的会发生样式选择器命名的重复(id的重复.class的重复等).这样间接导致的后果就是.自己的页面样式好好的.在整合一起的时候.可能就会发生样式的 ...

  8. Vue语法学习第五课——条件渲染

    ① v-if .v-else-if .v-else <div v-if="type === 'A'"> A </div> <div v-else-if ...

  9. vue checkbox 双向绑定及初始化渲染

    双向绑定可以绑定到同一个数组 <input type="checkbox" id="jack" value="Jack" v-mode ...

随机推荐

  1. SAM复杂度证明

    关于$SAM$的复杂度证明(大部分是对博客的我自己的理解和看法) 这部分是我的回忆,可省略 先回忆一下$SAM$ 我所理解的$SAM$,首先扒一张图 初始串$aabbabd$ 首先发现,下图里的$S- ...

  2. Linux 基于源码安装 Redis

    1.下载 Redis: 前往 Redis 官网复制 Redis 相应版本的下载链接,到终端下载 2. 进入到指定目录, 下载 redis.tar.gz 包,运行 wget + 复制的下载链接  例如: ...

  3. HDU 5362 Just A String 指数型母函数

    题面 Description 用m种字母构造一个长度为n的字符串,如果一个字符串的字母重组后可以形成一个回文串则该串合法,问随机构成的长为n的字符串的合法子串数目期望值. Input 第一行一整数T表 ...

  4. 【Java】学习路径62-枚举类型

    public enum Role { TEACHER,STUDENT,CHEF } 使用: System.out.println(r1);//输出TEACHER System.out.println( ...

  5. 【Java】学习路径53-InetAdress获取服务器ip

    InetAdress如何使用? import java.net.*; public class InetAdress { public static void main(String[] args) ...

  6. K8S_三种Port区别总结

    nodePort: 外部流量访问K8S集群中Service入口的一种方式 比如外部用户要访问k8s集群中的一个Web应用,那么我们可以配置对应service的type=NodePort,nodePor ...

  7. 理解 Spring IoC 容器

    控制反转与大家熟知的依赖注入同理, 这是通过依赖注入对象的过程. 创建 Bean 后, 依赖的对象由控制反转容器通过构造参数 工厂方法参数或者属性注入. 创建过程相对于普通创建对象的过程是反向, 称之 ...

  8. python脚本将json文件生成C语言结构体

    1.引言 以前用过python脚本根据excel生成相关C语言代码,其实本质就是文件的读写,主要是逻辑问题,这次尝试将json文件生成C语言的结构体. 2.代码 这是一个json文件,生成这个结构体的 ...

  9. 华南理工大学 Python第3章课后小测-2

    1.(单选)给出如下代码 s = 'Hello scut' print(s[4::-1]) 上述代码的输出结果是(本题分数:2)A) HelloB) olleHC) scutD) tucs您的答案:B ...

  10. K8S Pod Pending 故障原因及解决方案

    文章转载自:https://mp.weixin.qq.com/s/SBpnxLfMq4Ubsvg5WH89lA