vue.js v-bind动态绑定class数组语法
2023-09-27 14:22:47 时间
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="xiaonaihu" />
<meta name="generator" content="HBuilder X" />
<title>v-bind动态绑定class数组语法</title>
<script src="../../lib/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h2 class = "title" :class = "['active','line']">{{message}}</h2>
<h2 class = "title" :class = [isActive,isLine]>{{message}}</h2>
<h2 class="title" :class = "getClasses()">{{message}}</h2>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data:{
message:"hello vue",
isActive:"Active",
isLine:"Line"
},
methods:{
getClasses: function() {
return [this.isActive,this.isLine]
}
}
});
</script>
</body>
</html>
效果
相关文章
- 结合Vue.js的前端压缩图片方案
- Vue 中的 slot 插槽
- vscode 关联 vue文件为html
- vue.config.js配置优化
- 精品spring boot+MySQL客户关系管理系统vue
- Vue keep-alive实践总结
- Ant Design Vue 单文件上传Upload
- vue.js:使用v-bind通过数组绑定多个class案例
- vue.js:哪些数组的方法是响应式的案例
- vue.js v-bind动态绑定style数组语法
- Vue的插值与表达式
- vue学习(十五) >>>或/deep/或::v-deep深度作用选择器作用及使用
- 分享几个简单的技巧让你的 vue.js 代码更优雅
- angular.js和vue.js中实现函数去抖(debounce)
- Vue.js 笔记之 img src
- vue项目优化--使用CDN和Gzip
- Vue.js双向绑定的实现原理
- Vue.js双向绑定的实现原理和模板引擎实现原理(##########################################)
- vue里使用driver.js实现项目功能向导指引
- Vue.js异步更新DOM策略及nextTick
- 聊聊 vue.js 的 template 编译
- 用Vue开发仿旅游站webapp项目总结
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
- Rubik UI 是一个基于 Vue.js 2.0
- vue-router单页应用简单示例
- 粗解Vue.js的render方法
- Vue.js——60分钟组件快速入门(上篇)【2】
- 基于webpack和vue.js搭建开发环境
- js 实现vue—引入子组件props传参