Vue学习之--------绑定样式、条件渲染、v-show和v-if的区别（2022/7/12）
1、绑定样式
没啥好说的、我觉得还没直接引入外部写好的css样式方便（个人想法）
1.1 基础知识
绑定样式：
- 1、class样式
写法:class=“xxx” xxx可以是字符串、对象、数组。
字符串写法适用于：类名不确定，要动态获取。
对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。 - 2、style样式
:style="{fontSize: xxx}“其中xxx是动态值。
:style=”[a,b]"其中a、b是样式对象。
1.2 代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>标题</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
.basic {
width: 400px;
height: 100px;
border: 1px solid black;
}
.happy {
border: 4px solid red;
;
background-color: rgba(255, 255, 0, 0.644);
background: linear-gradient(30deg, yellow, pink, orange, yellow);
}
.sad {
border: 4px dashed rgb(2, 197, 2);
background-color: gray;
}
.normal {
background-color: skyblue;
}
.atguigu1 {
background-color: yellowgreen;
}
.atguigu2 {
font-size: 30px;
text-shadow: 2px 2px 10px red;
}
.atguigu3 {
border-radius: 20px;
}
</style>
</head>
<body>
<div id="App">
<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
<div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br /><br />
<!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
<div class="basic" :class="classArr">{{name}}</div> <br /><br />
<!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
<div class="basic" :class="classObj">{{name}}</div> <br /><br />
<!-- 绑定style样式--对象写法 -->
<div class="basic" :style="styleObj">{{name}}</div> <br /><br />
<!-- 绑定style样式--数组写法 -->
<div class="basic" :style="styleArr">{{name}}</div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
//创建Vue实例
new Vue({
el: '#App',
data: {
value: "Vue",
name: 'ZYZ',
mood: 'normal',
classArr: ['atguigu1', 'atguigu2', 'atguigu3'],
classObj: {
atguigu1: false,
atguigu2: false,
},
styleObj: {
fontSize: '40px',
color: 'red',
},
classObj: {
atguigu1: false,
atguigu2: false,
},
styleObj2: {
backgroundColor: 'orange'
},
styleArr: [
{
fontSize: '40px',
color: 'blue',
},
{
backgroundColor: 'gray'
}
]
},
methods: {
changeMood() {
const arr = ['happy', 'sad', 'normal']
const index = Math.floor(Math.random() * 3)
this.mood = arr[index]
}
},
})
</script>
</body>
</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 代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>标题</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="App">
<!-- 使用v-show做条件渲染 -->
<h1 v-show="false">欢迎茶颜悦色的小主：{{name}}</h1>
<h1 v-show="flag">欢迎茶颜悦色的小主(flag)：{{name}}</h1>
<h1 v-show="1 === 1">欢迎茶颜悦色的小主(表达式)：{{name}}</h1>
<!-- 使用v-if做条件渲染 -->
<h2 v-if="false">欢迎来到{{name}}</h2>
<h2 v-if="1 === 1">欢迎来到{{name}}</h2>
<h2>当前的n值是:{{num}}</h2>
<button @click="num++">点我n+1</button>
<!-- v-else和v-else-if -->
<div v-if="num === 1">Angular</div>
<div v-else-if="num === 2">React</div>
<div v-else-if="num === 3">Vue</div>
<div v-else>哈哈</div>
<!-- v-if与template的配合使用 -->
<template v-if="num === 1">
<h2>你好呀</h2>
<h2>懒羊羊</h2>
<h2>灰太狼</h2>
</template>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
//创建Vue实例
const vm = new Vue({
el: '#App',
data: {
flag: true,
value: "Vue",
name: "zyz",
num: 0
}
})
</script>
</body>
</html>
2.3 测试效果
Vue学习之--------绑定样式、条件渲染、v-show和v-if的区别（2022/7/12）的更多相关文章
- vue.js选择if（条件渲染）详解
vue.js选择if(条件渲染)详解 一.总结 一句话总结: v-if <!DOCTYPE html> <html lang="en"> <head& ...
- vue 自学笔记(4): 样式绑定与条件渲染
一:对象绑定 Vue 对于页面的样式加载也有独特的方式,按照 Vue 提供的方式,我们可以轻松的控制它们的呈现. 假使我们要实现点击 div 变色 Vue 提供的样式方案的本质是对元素节点进行属性的绑 ...
- vue class与style绑定、条件渲染、列表渲染
列表渲染 根据我例子的需要,先来说下,列表渲染使用到的是v-for指令,需要使用 item in items 形式的特殊语法,items 是源数据数组并且 item 是数组元素迭代的别名,具体使用方法 ...
- Vue学习之路6-条件渲染
条件指令 所谓条件指令是指满足某个条件时执行哪部分代码,不满足条件时执行哪部分条件代码.vue条件指令有v-if,v-else-if,v-else三个,v-if条件渲染用来指示元素是否移除或者插入,根 ...
- vue中v-bind绑定样式
近来发现v-bind绑定样式的两个好玩的栗子 可以直接绑定到一个样式对象,让模板更清晰: <div id="app"> <div v-bind:style=&qu ...
- Vue知识整理10：条件渲染（v-if v-show）
在Vue中使用v-if等条件实现条件的判断来实现对象的显示. 也可以采用 v-show条件来实现对象的显示.
- Vue学习之--------Scoped样式（2022/8/1）
1.场景 一个页面开发团队进行页面的开发设计.无可避免的会发生样式选择器命名的重复(id的重复.class的重复等).这样间接导致的后果就是.自己的页面样式好好的.在整合一起的时候.可能就会发生样式的 ...
- Vue语法学习第五课——条件渲染
① v-if .v-else-if .v-else <div v-if="type === 'A'"> A </div> <div v-else-if ...
- vue checkbox 双向绑定及初始化渲染
双向绑定可以绑定到同一个数组 <input type="checkbox" id="jack" value="Jack" v-mode ...
随机推荐
- 羽夏看Linux内核——门相关入门知识
写在前面 此系列是本人一个字一个字码出来的,包括示例和实验截图.如有好的建议,欢迎反馈.码字不易,如果本篇文章有帮助你的,如有闲钱,可以打赏支持我的创作.如想转载,请把我的转载信息附在文章后面,并 ...
- OpenSSF的开源软件风险评估工具：Scorecards
对于IT从业者来说,Marc Andreessen 十年前提出"软件吞噬世界"的观点早已耳熟能详.无论是私人生活还是公共领域,软件为现代社会的方方面面提供动力,对现代经济和国家安全 ...
- Mybatis介绍、使用IDEA快速入门
1. Mybatis概念 MyBatis 是一款优秀的持久层框架,用于简化 JDBC 开发 JavaEE三层架构:表现层.业务层.持久层 JDBC 与 MyBatis 对比: MyBatis 本是 A ...
- RabbitMQ 入门系列：3、基础含义：持久化、排它性、自动删除、强制性、路由键。
系列目录 RabbitMQ 入门系列:1.MQ的应用场景的选择与RabbitMQ安装. RabbitMQ 入门系列:2.基础含义:链接.通道.队列.交换机. RabbitMQ 入门系列:3.基础含义: ...
- Spring源码-Bean生命周期总览
- ARC120D Bracket Score 2 （模拟）
题面 给一个长度为 2 N 2N 2N 的序列 A A A,定义一个长度为 2 N 2N 2N 的合法括号序列的 得分(score) 为: 对于每对配对的括号 i , j i,j i,j, ∣ A i ...
- identity4 系列————持久化配置篇[五]
前言 上面已经介绍了3个例子了,并且介绍了如何去使用identity. 但是在前面的例子中,我们使用的都是在内存中操作,那么正式上线可能需要持久到数据库中. 这里值得说明的是,并不一定一定要持久化到数 ...
- 如何使用Postman调试HMS Core推送接口？
HMS Core推送服务支持开发者使用HTTPS协议接入Push服务端.Postman是一款接口测试工具,它可以模拟用户发起的各类HTTP请求,将请求数据发送至服务端,获取对应的响应结果.Postma ...
- 字符类数据类型和oracle字符类型的区别
为兼容Oracle的数据类型,KingbaseES扩展了Oracle的NUMBER.VARCHAR2.CHAR(n)和DATE类型.该措施使得移植Oracle的Create Table等DDL语句时, ...
- Flink SQL 子图复用逻辑分析
子图复用优化是为了找到SQL执行计划中重复的节点,将其复用,避免这部分重复计算的逻辑.先回顾SQL执行的主要流程 parser -> validate -> logical optimiz ...