Vue.js 学习笔记七控制样式

Vue.js可以灵活的控制样式

我们首先随便写2个样式

<style>.divCss {background-color: green;width:400px;height:400px;}.fontCss {font-size: large;color:red;}</style>

直接在元素中class="divCss"这样，是老办法了，在Vue中，可以更加灵活

<div id="appDiv" v-bind:class="{divCss:divFlag,fontCss:fontFlag}"> 我是Div中的文字</div><script>var v = new Vue({el: '#appDiv',data: {divFlag: true,fontFlag: false},methods: {}})</script>

用v-bind绑定样式属性，通过类的方式，可以控制某个样式是否生效，例如这里出现的就是绿底黑字，如果把Vue实例中的data.fonFlag改成true，那就是

绿地红字了，这样的好处是，可以方便灵活的控制样式。

当然也可以将元素上的类当作data中的一个属性

 <div id="appDiv" ><div v-bind:class="{divCss:divFlag,fontCss:fontFlag}">我是Div1中的文字</div><div v-bind:class="div2Css">我是Div2中的文字</div></div><script>var v = new Vue({el: '#appDiv',data: {divFlag: true,fontFlag: true,div2Css: { divCss: true, fontCss: false }},methods: {}})</script>

当然如果样式本身是固定不变，也可以用最原始的方法，Vue也提供用数组方式绑定

 <div id="appDiv"><div v-bind:class="{divCss:divFlag,fontCss:fontFlag}">我是Div1中的文字</div><div v-bind:class="div2Css">我是Div2中的文字</div><!--这里的fontCss,divCss不是样式名，是Vue实例中的data的属性名--><div v-bind:class="[fontCss,divCss]">我是Div3中的文字</div></div><script>var v = new Vue({el: '#appDiv',data: {divFlag: true,fontFlag: true,div2Css: { divCss: true, fontCss: false },fontCss: 'fontCss',divCss: 'divCss'},methods: {}})</script>

p.s:如果不像用class绑定，用style也可以，v-bind:style=" " 就行，方法跟绑定class一样，这里就不写了。

Vue.js 学习笔记六 v-model 双向绑定数据

转载于:https://www.cnblogs.com/luyShare/p/11540556.html

Vue.js 学习笔记七控制样式相关推荐

Vue.js 学习笔记八 v-for
v-for指令,是用来循环的,常用的情况有以下4种 <div id="divApp"><p v-for="n in 5 ...
Vue.js 学习笔记二，一些输出指令
Vue的一些输出指令 {{字段}},v-text指令,v-html指令 <html> <head><meta name="viewport" cont ...
Vue.js 学习笔记九 v-if和v-show
<p v-if="flag">v-if</p><p v-show="flag">v-show</p> flag是 ...
Vue.js 学习笔记四用一，二，三的知识做个跑马灯
做个简单的跑马灯效果页面定义2个按钮,绑定2个方法. <div id="divApp"><input type="button" value ...
Vue.js 学习笔记一
上手前的一些概念为啥要用Vue.js Vue.js 是目前最流行的前端框架之一,专注于视图层,容易上手. 使用Vue.js,通过框架提供的指令可以减少很多DOM操作(数据的双向绑定),提高渲染效率, ...
Vue.js学习笔记 2022 04 17
Vue.js学习笔记 1 Vue.js基础 Vue.js介绍 vuejs 渐进式 JavaScript 框架 Vue.js 如何应用 1 在普通html项目中,引入VUE.JS Hb 的项目生成的 ...
遇见 vue.js --------阿文的vue.js学习笔记（8 —1）------- 列表渲染
** 新学习新征程,我们一起踏上学习 vue.js的新长征遇见 vue.js --------阿文的vue.js学习笔记(1)-----初识vue.js 遇见 vue.js --------阿文的v ...
Vue.js学习系列七——Vue服务器渲染Nuxt学习
我又回来啦~这次我们来学习Vue的服务器渲染SSR. 关于SSR的文章网上很多,一开始看得我云里雾里.然后去Vue.js 服务器渲染指南和nuxt官网看了看,发现文章大多都是搬运官网的内容,真正讲的清 ...
Vue.js 学习笔记十二 Vue发起Ajax请求
首先需要导入vue-resource.js,可以自己下载引入,也可以通过Nuget下载,它依赖于Vue.js. 全局使用方式: Vue.http.get(url,[options]).then(suc ...

Vue.js 学习笔记七控制样式

Vue.js 学习笔记七控制样式相关推荐

最新文章

热门文章

Vue.js 学习笔记 七 控制样式

Vue.js 学习笔记 七 控制样式相关推荐

最新文章

热门文章

Vue.js 学习笔记七控制样式

Vue.js 学习笔记七控制样式相关推荐