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 ...
随机推荐
- CentOS7部署Bind
镜像下载.域名解析.时间同步请点击 阿里巴巴开源镜像站 1.简介 DNS(Domain Name System),域名系统,因特网上作为域名和IP地址相互映射的一个分布式数据库,能够使用户更方便的访问 ...
- kubernetes允许master调度
1,让 Master 也当作 Node 使用 (1)如果想让 Pod 也能调度到在 Master(本样例即 localhost.localdomain)上,可以执行如下命令使其作为一个工作节点: 注意 ...
- 韦东山 嵌入式linux教程 笔记
@ 目录 资源链接 一.常用命令 二.shell 三.如何更改PATH? 四.路径 五.vi编辑器 六.进阶命令 七.NAT配置网络 (第2篇-P34) 八.开发板挂载 Ubuntu 的 NFS 目录 ...
- 前端知识之BOM和DOM
前端基础之BOM和DOM windw对象 指浏览器窗口,所有的浏览器都支持window对象 常用的window方法 window.innerHeight 浏览器窗口的内部高度 window.inner ...
- Go语言－ import 导入包的语法
一 包的导入语法 在go语言中一个包(文件夹)中可以包含多个 go 文件,每一个文件通过文件第一行的 package 来指明自己所在的包,原则上应该与自己所在的文件夹同名,但也可以指定为其他名称,但同 ...
- C249: 'DATA': SEGMENT TOO LARGE“解决方法 | keilC51设置编译模式：SMALL,COMPACT,LARGE
"Keil Cx51编译器提供三条编译模式控制命令:SMALL,COMPACT,LARGE,它们对变量存储器空间的影响如下. SMALL:所有变量都被定义在8051单片机的片内RAM中,对这 ...
- Rust极简教程
目录 简介 特性 特征 用途 安装 核心组件 常用命令 基础语法 数据类型 标量类型 复合类型 示例 条件语句 循环 输出&输入 输出 输出花括号 输出非基础类型 输入 所有权 切片 结构体 ...
- 百度地图Api使用常见问题
引用 百度地图API文档 百度地图使用文档 使用 LocalSearch 控件搜索出来的Marker无法点击的问题或者导致第一个Marker标注的信息框关闭后Label消失 解决方法就是使用 onMa ...
- 动态JDK代理方式-实现类增强
需求描述: 抽取dao层开启和提交事物交由代理类一并执行 分析: 假如UserDao接口中有很多方法,例如addUser().deleteUser().updateUser()等等,需要频繁的和数据库 ...
- linux命令手册
常⻅系统服务命令 常用命令 作用 chkconfig --list 列出系统服务 service <服务名> status 查看某个服务 service <服务名> start ...