Vue.js框架学习—绑定style样式

一、对象写法

模板和Vue实例

<body><div id="root"><div :style="styleObj">{{name}}</div></div>
</body>
<script>new Vue({el:'#root',data:{name:'绑定style样式-对象写法',styleObj:{width: '400px',height: '100px',backgroundColor: 'pink',border: '4px dashed blue',borderRradius: '20px'}}})
</script>

案例效果

二、数组写法

模板和Vue实例

<body><div id="root"><div :style="styleArr">{{name}}</div></div>
</body>
<script>new Vue({el:'#root',data:{name:'绑定style样式-数组写法',styleArr:[{width: '400px',height: '100px',},{backgroundColor: 'pink',border: '4px dashed purple',},{borderRradius: '20px'}]}})
</script>

案例效果

Vue.js框架学习—绑定style样式相关推荐

Vue.js框架学习，数据绑定
Vue中有两种数据绑定的方法: 一.单项数据绑定(v-bind) 单项数据绑定用"v-bind"指令,数据只能从Vue实例的data属性流向页面,当data属性值发生变化,页面中对 ...
js 获得明天0点时间戳_Python 3+Django 3 结合Vue.js框架构建前后端分离Web开发平台实战...
点击上方"测试开发技术",选择设为"设为星标" 优质文章,第一时间送达! 学习全文大概需要 12分钟,内容实战性较强. 1. 前言本篇将基于Python 3. ...
Vue.js 框架基础笔记
Vue.js 框架基础笔记 1. Vue.js 基本概念 1.1 遇见 Vue.js 1.1.1 为什么要学习 Vue.js 1.1.2 前端开发的复杂化 1.1.3 Vue.js 特点 1.1.4 ...
前端Vue.js框架是什么？有哪些特点？
前端Vue.js框架是什么?有哪些特点?Vue.js是一个前端框架,用于构建用户界面的渐进式框架.在Vue中一个核心的概念是让用户不再操作DOM元素解放了用户的双手,让程序员可以更多的时间去关注业务逻 ...
前端_快速入门Vue.js框架
文章目录快速入门Vue.js框架 0.前言 1.Vue.js框架 1.1.Vue简介 1.2.第一个Vue程序 1.3.el:挂载点 2.Vue指令 2.2.v-html 2.3.v-on 2.4. ...
Vue.js 框架从入门到精通，只需要它！
点击蓝字关注我们你还在一行一行低效代码吗?你还在不停地操作 DOM 吗?你的代码还会频繁出现 CSS.Javascript 配置文件冲突吗? Vue3 框架快速解决你的代码低效问题! 01 Vue ...
从零吃透 Vue.js 框架，这里全部有！
点击蓝字关注我们你还在一行一行低效代码吗?你还在不停地操作 DOM 吗?你的代码还会频繁出现 CSS.Javascript 配置文件冲突吗? Vue3 框架快速解决你的代码低效问题! 01 Vue ...
Vue.js框架简介（1）
1.Vue.js框架简介 Vue(读音 /vju:/,发音类似于 view)是一套用于构建用户界面的渐进式的JavaScript框架. 1.1.为什么要学习Vue.js 什么是Vue.js Vue.j ...
如何进行 Vue.js 框架的安装？
cmd如何进行 Vue.js 框架的安装? 步骤总结: 本地磁盘建立对应的空文件夹:举例:路径如C:\个人\vuejs\secondvue 电脑单击"开始",搜索程序**" ...

Vue.js框架学习—绑定style样式

一、对象写法

模板和Vue实例

案例效果

二、数组写法

模板和Vue实例

案例效果

Vue.js框架学习—绑定style样式相关推荐

最新文章

热门文章