vue动态绑定属性--基本用法及动态绑定class
动态绑定属性v-bind:，语法糖形式:省略v-bind，仅写一个冒号。
一、动态绑定基本属性
1 <body>
2 <!-- v-bind 动态绑定属性-基本用法 -->
3 <img v-bind:src="imgUrl" alt="">
4 <script src="../js/vue.js"></script>
5 <script>
6 setTimeout(function() {
7 const vm = new Vue({
8 el: '#app',
9 data: {
10 imgUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242332225H9-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650099133&t=7737c14262a80534f32b81b3210ae247',
11 },
12 });
13 },2000);
14 </script>
15 </body>
二、动态绑定class
（1）基本用法：
1 <head>
2 <style>
3 .active{
4 color: red;
5 }
6 </style>
7 </head>
8
9 <body>
10 <div id="app">
11
12 <!-- v-bind动态绑定class--基本用法 -->
13 <div class="active">{{msg}}</div>
14 <div :class="on">{{msg}}</div>
15
16 </div>
17 <script src="../js/vue.js"></script>
18 <script>
19 setTimeout(function() {
20 const vm = new Vue({
21 el: '#app',
22 data: {
23 msg: 'hello',
24 on: 'active',
25 }
26 });
27 },2000);
28 </script>
29 </body>
（2）对象语法：
a.语法格式：v-bind:class="{类名1:布尔值,类名2:布尔值}"
1 <head>
2 <style>
3 .active{
4 color: red;
5 }
6 </style>
7 </head>
8
9 <body>
10 <div id="app">
11
12 <!-- v-bind动态绑定class--对象语法(使用较多) -->
13 <div :class="{active:isActive,line:isLine}">{{msg}}</div>
14
15 </div>
16 <script src="../js/vue.js"></script>
17 <script>
18 setTimeout(function() {
19 const vm = new Vue({
20 el: '#app',
21 data: {
22 msg: 'hello',
23 isActive: false,
24 isLine: true,
25 }
26 });
27 },2000);
28 </script>
29 </body>
30
b.如果绑定的对象太长，可以放在方法或者是计算属性中，将其返回，调用方法时必须加上括号
1 <head>
2 <style>
3 .active{
4 color: red;
5 }
6 </style>
7 </head>
8
9 <body>
10 <div id="app">
11
12 <div :class="getClassesObj()">{{msg}}</div>
13
14 </div>
15 <script src="../js/vue.js"></script>
16 <script>
17 setTimeout(function() {
18 const vm = new Vue({
19 el: '#app',
20 data: {
21 isActive: false,
22 isLine: true
23 },
24 methods: {
25 getClassesObj(){
26 return {active: this.isActive, line:this.isLine};
27 }
28 }
29 });
30 },2000);
31 </script>
32 </body>
（3）数组语法
1 <head>
2 <style>
3 .active{
4 color: red;
5 }
6 </style>
7 </head>
8
9 <body>
10 <div id="app">
11
12 <!-- v-bind动态绑定class--数组语法(少) -->
13 <h1 :class="['active', 'line']"></h1>
14 <h1 :class="[active, line]">v-bind动态绑定class--数组语法(少)</h1>
15 <h1 :class="getClassesArr()">v-bind动态绑定class--数组语法(少)-方法</h1>
16
17 </div>
18 <script src="../js/vue.js"></script>
19 <script>
20 setTimeout(function() {
21 const vm = new Vue({
22 el: '#app',
23 data: {
24 msg: 'hello',
25 active: 'aaa',
26 line: 'bbb',
27 },
28 methods: {
29 getClassesArr(){
30 return [this.active, this.line];
31 }
32 },
33 });
34 },2000);
35 </script>
36 </body>
37
38 </html>
vue动态绑定属性--基本用法及动态绑定class的更多相关文章
- Vue计算属性的用法
计算属性是个很好玩的东西,在这里面可以对数据模型进行操作,·也可以使用getter,setter方法.使用的话也是非常的简洁明了 这里写个例子 <!DOCTYPE html> <ht ...
- 2. Vue语法--插值操作&动态绑定属性 详解
目录 1. 设置vue模板 2. vue语法--插值操作 3. 动态绑定属性--v-bind 一. 设置vue模板 我们经常新建一个vue项目的时候, 会写如下的一段代码 <!DOCTYPE h ...
- vue.js中的表单radio,select,textarea的v-model属性的用法
只要是表单元素,其值已经不会再用value来定义了,但是placeholder还是可以用来设置默认值. section1--input:type="text" type=" ...
- vue计算属性详解——小白速会
一.什么是计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> ...
- vue - 计算属性、表单输入绑定
计算属性 computed:{} <!DOCTYPE html> <html> <head> <title></title> </he ...
- Vue插件编写、用法详解（附demo）
Vue插件编写.用法详解(附demo) 1.概述 简单来说,插件就是指对Vue的功能的增强或补充. 比如说,让你在每个单页面的组件里,都可以调用某个方法,或者共享使用某个变量,或者在某个方法之前执行一 ...
- vue计算属性详解
一.什么是计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> ...
- Vue中基本指令用法
指令在Vue中是个很重要的功能,在Vue项目中是必不可少的.根据官网的介绍,指令 (Directives) 是带有 v- 前缀的特殊属性.指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地 ...
- Vue的属性、事件、插槽
属性 自定义属性props ->组件的propos中声明的属性 原生属性attrs ->没有声明属性,默认自动挂载在组件的根元素上,inheritAttrs可以关闭自动挂载 特殊属性cla ...
随机推荐
- notepad++给每一列数据加单引号及逗号结尾
原始数据: 对列操作--先加前引号(光标放在第一行哦):编辑-->列块编辑 再加后引号和逗号(文本尾端不齐,就用替换): 打开替换窗口:ctrl+F(其实就是查找) 加完引号和逗号效果:(如果最 ...
- 航模电池平衡头接线，1S-6S原理图
1-4S平衡头接线 S数代表几级锂电池串联,比如3S代表串联了3级,所以总电压为3*3.7V=11.4V.(每一级可能是多个电芯并联) 图源:百度贴吧 图源:5imx论坛 3S电池示例 B6充电器
- Java基础（补充）
为什么 Java 中只有值传递? 开始之前,我们先来搞懂下面这两个概念: 形参&实参 值传递&引用传递 形参&实参 方法的定义可能会用到 参数(有参的方法),参数在程序语言中分 ...
- kvm管理查看信息，添加，删除，暂停恢复，克隆等
KVM virsh管理指令 virsh 查看帮助信息 查看命令帮助 [root@KVM ~]# virsh Welcome to virsh, the virtualization interacti ...
- Python集成开发工具(IDE)推荐
1.7 Python集成开发工具(IDE)推荐 1.7.1 Notepad++ Notepad++是Windows操作系统下的一套文本编辑器(软件版权许可证: GPL),有完整的中文化接口及支持多国语 ...
- 两个对象值相同(x.equals(y) == true)，但却可有不同的hash code，这句话对不对?
对. 因为equals()方法可以用开发者重写,hashCode()方法也可以由开发者来重写,因此它们是否相等并没有必然的关系. 如果对象要保存在HashSet或HashMap中,它们的equals( ...
- java-jsp-learnning
简介:JSP(全称Java Server Pages) 一种动态网页开发技术.它使用JSP标签在HTML网页中插入Java代码.标签通常以<%开头以%>结束. JSP是一种Java ser ...
- kafka 的高可用机制是什么？
这个问题比较系统,回答出 kafka 的系统特点,leader 和 follower 的关系,消息 读写的顺序即可.
- 学习GlusterFS（三）
glusterfs,GNU cluster file system,创始人Anand Babu Periasamy,目标:代替开源Lustre和商业产品GPFS,glusterfs是什么: cloud ...
- C++面向对象 - 类的前向声明的用法
C++中的类应当是先定义,然后使用.但在处理相对复杂的问题,比如考虑类的组合时,有可能遇到两个类相互引用的情况,这种情况称为循环依赖. 考虑下面代码: class A { public: void f ...