Vue 样式绑定 && 条件渲染
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>Vue 样式绑定</title>
6 <style>
7 .basic{
8 width: 400px;
9 height: 100px;
10 border: 1px solid black;
11 }
12 .happy{
13 border: 4px solid red;
14 background-color: rgba(255, 255, 0, 0.644);
15 background: linear-gradient(30deg, yellow, pink, orange, yellow);
16 }
17 .sad{
18 border: 4px dashed rgb(2, 197, 2);
19 background-color: gray;
20 }
21 .normal{
22 background-color: skyblue;
23 }
24 .div1{
25 background-color: yellowgreen;
26 }
27 .div2{
28 font-size: 30px;
29 text-shadow: 2px 2px 10px red;
30 }
31 .div3{
32 border-radius: 20px;
33 }
34 </style>
35 <script type="text/javascript" src="../js/vue.js"></script>
36 </head>
37 <body>
38 <!--
39 绑定样式：
40 1.class样式
41 写法：class="xxx" xxx可以是字符串、对象、数组
42 字符串写法适用于 雷鸣不确定，要动态获取
43 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定
44 数组写法使用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用
45 2.style样式
46 ：style="fontSize: xxx" 其中xxx是动态值
47 ：style="[a, b]"其中a、b是样式对象
48
49 -->
50 <div id="root">
51 <!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
52 <div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/> <br/>
53
54 <!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
55 <div class="basic" :class="classArr">{{name}}</div> <br/> <br/>
56
57 <!-- 绑定class样式，对象写法，适用于：要绑定的样式个数、名字确定，但要动态决定启不启用它 -->
58 <div class="basic" :class="classObj">{{name}}</div> <br/> <br/>
59
60 <!-- 绑定style样式-对象写法 -->
61 <div class="basic" :style="styleObj">{{name}}</div> <br/> <br/>
62
63 <!-- 绑定style样式-数组写法 -->
64 <div class="basic" :style="styleArr">{{name}}</div> <br/> <br/>
65 </div>
66 </body>
67
68 <script type="text/javascript" >
69 Vue.config.productionTip = false;// 阻止 vue 在启动时生成生产提示。
70 let vm = new Vue({
71 el: '#root',
72 data:{
73 name: 'BaiYeShu',
74 mood: 'normal',
75 classArr: ['div1', 'div2', 'div3'],
76 classObj:{
77 div1: true,
78 div2: true,
79 div3: true
80 },
81 styleObj:{
82 color: "red",
83 fontSize: "40px",
84 backgroundColor: 'orange'
85 },
86 styleArr:[
87 {
88 color: "red",
89 fontSize: "40px",
90 },
91 {
92 backgroundColor: 'orange'
93 }
94 ]
95 },
96 methods:{
97 changeMood(e){
98 const arr = ['happy', 'sad', 'normal'];
99 const index = Math.floor(Math.random()*3);
100 this.mood = arr[index];
101 }
102 }
103 });
104 </script>
105 </html>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>Vue 条件渲染</title>
6 <script type="text/javascript" src="../js/vue.js"></script>
7 </head>
8 <body>
9 <!--
10 条件渲染：
11 1.v-if
12 写法：
13 . v-if="表达式"
14 . v-else-if="表达式"
15 . v-else
16 适用于：切换平率较低的场景
17 特点：不展示的DOM元素直接被移除
18 注意：v-if可以和：v-else-if、v-else一起使用。但要求结构不能被“打断”。
19 2.v-show
20 写法：v-show="表达式"
21 适用于：切换频率较高的场景
22 特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
23 3.备注：使用v-if的时候，元素可以无法获取到，而使用v-show一定可以获取到。
24 -->
25 <div id="root">
26 <h2>当前n的值是:{{n}}</h2>
27 <button @click="n++">点我n+1</button>
28 <!-- 使用v-show做条件渲染 -->
29 <!-- <h2 v-show="false">欢迎来到{{name}}!</h2>
30 <h2 v-show="1 === 1">欢迎来到{{name}}!</h2> -->
31
32 <!-- 使用v-if做条件渲染 -->
33 <!-- <h2 v-if="false">欢迎来到{{name}}!</h2>
34 <h2 v-if="1 === 1">欢迎来到{{name}}!</h2> -->
35
36 <!-- 使用v-else和v-else-if做渲染 -->
37 <div v-if="n === 1">Angular</div>
38 <div v-else-if="n === 2">React</div>
39 <div v-else-if="n === 3">Vue</div>
40 <div v-else>哈哈</div>
41
42 <!-- v-if与temolate配合使用 -->
43 <template v-if="n === 1">
44 <h2>hello</h2>
45 <h2>{{name}}</h2>
46 <h2>BeiJing</h2>
47 </template>
48 </div>
49 </body>
50
51 <script type="text/javascript" >
52 Vue.config.productionTip = false;// 阻止 vue 在启动时生成生产提示。
53 let vm = new Vue({
54 el: '#root',
55 data:{
56 name: 'BaiYeShu',
57 n: 0
58 },
59 });
60 </script>
61 </html>
Vue 样式绑定 && 条件渲染的更多相关文章
- Vue学习之--------绑定样式、条件渲染、v-show和v-if的区别（2022/7/12）
文章目录 1.绑定样式 1.1 基础知识 1.2 代码实例 1.3 测试效果 2.条件渲染 2.1 基本知识 2.2 代码实例 2.3 测试效果 1.绑定样式 没啥好说的.我觉得还没直接引入外部写好的 ...
- Vue学习计划基础笔记(三)-class与style绑定,条件渲染和列表渲染
Class与style绑定.条件渲染和列表渲染 目标: 熟练使用class与style绑定的多种方式 熟悉v-if与v-for的用法,以及v-if和v-for一起使用的注意事项 class与style ...
- 关于vue.js中条件渲染的练习
html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8 ...
- Vue样式绑定和事件处理器
一.样式绑定 class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. v-bind 在处理 class 和 style 时, 专门增强了它 ...
- Vue样式绑定、事件绑定
1.样式绑定 1.1class类标签绑定 <p :class="对象"> <p :class="数组"> <p :class=&q ...
- vue样式绑定、事件监听、表单输入绑定、响应接口
1.样式绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错 ...
- Vue 基础自查——条件渲染和列表渲染
v-if和v-show的区别是什么? v-if和v-for为什么不能一起用? v-for中的key有什么作用? 1 v-if 和 v-show 1.1 作用 都用来控制元素的显示和隐藏 1.2 控制元 ...
- vue样式绑定
vue 绑定class 和style 有相同的地方,可以是数组和对象,对于class class是真实的在css样式中添加的,只不过在元素中添加需要:class这样代表绑定,然后这个class作为对象 ...
- 3-6 Vue中的条件渲染
本次案例讲解:v-if,v-show,v-else,v-else-if和key值的相关用法!!! v-if指令: //通过一个(v-if)指令 ,可以结合js表达式的返回值,决定一个标签是否在页面上展 ...
随机推荐
- R可视化：plot函数基础操作，小白教程
最近迷恋上了画图,一方面是觉得挺有意思的,另一方面是觉得自己确实画图方面比较弱,所以决定比较系统地回顾反思一下,同时顺带记录下来分享给大家.也确实是好久好久没更新文章了,真的是杂事太多太忙太牵扯精力没 ...
- Mathtype无限试用
PS:本文方法参考网上搜集的内容,仅做记录. 首先,默认大家都已安装Mathtype软件.如果没装的话,安装下就行.建议安装Mathtype国际版软件,因为国产mathtype会延长失败.如果失败的话 ...
- 虚拟机：ESX
VMware ESXi 与ESX 产品之比较 VMware vSphere 5.0 以后版本,所有底层虚拟化产品都改为ESXi产品,本文主要比较了ESXi与ESX的各自特点,以便对大家是否要把现有 ...
- TENSEAL: A LIBRARY FOR ENCRYPTED TENSOR OP- ERATIONS USING HOMOMORPHIC ENCRYPTION 解读
本文记录阅读该paper的笔记,这篇论文是TenSeal库的原理介绍. 摘要 机器学习算法已经取得了显著的效果,并被广泛应用于各个领域.这些算法通常依赖于敏感和私有数据,如医疗和财务记录.因此,进一步 ...
- Kafka 消费者解析
一.消费者相关概念 1.1 消费组&消费者 消费者: 消费者从订阅的主题消费消息,消费消息的偏移量保存在Kafka的名字是__consumer_offsets的主题中 消费者还可以将⾃⼰的偏移 ...
- ERP采购收货在标准成本和移动平均价下的差别
欢迎关注微信公众号:iERPer (ERP咨询顾问之家) ERP系统在处理主要的采购流程有: 下采购合同->下采购订单->收货->发票校验->付款(财务) 其中 收货和发票校验 ...
- python各版本下载
python2源码压缩包 Python-2.7.9.tgz Python-2.7.10.tgz Python-2.7.11.tgz Python-2.7.12.tgz Python-2.7.13. ...
- 技术分享 | app测试中常用的Android模拟器
原文链接 Emulator Emualor 是 Android Studio 自带的模拟器,是官方提供的工具,Android 开发最常使用的就是这一款. 它功能非常齐全,电话本.通话等功能都可正常使用 ...
- 理论+案例，带你掌握Angular依赖注入模式的应用
摘要:介绍了Angular中依赖注入是如何查找依赖,如何配置提供商,如何用限定和过滤作用的装饰器拿到想要的实例,进一步通过N个案例分析如何结合依赖注入的知识点来解决开发编程中会遇到的问题. 本文分享自 ...
- SAP APO - Architecture
SAP APO体系结构由多个组件组成-数据库,BI环境包含InfoCube和实时缓存. InfoCube是BI数据集市的一部分,实时缓存是您保留与计划和调度有关的所有数据的主要区域. 您可以在实时缓存 ...