Vue之动态绑定CSS样式

demo.html

 1 <!DOCTYPE html>
 2 <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-html="http://www.w3.org/1999/xhtml"
 3       xmlns:v-on="http://www.w3.org/1999/xhtml">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Vue Demo</title>
 7     <!--自选版本-->
 8     <!--<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>-->
 9     <!-- 开发环境版本,包含了有帮助的命令行警告 -->
10     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
11     <!-- 生产环境版本,优化了尺寸和速度 -->
12     <!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
13     <link href="style.css" rel="stylesheet">
14 </head>
15 <body>
16 <div id="app">
17     <div>
18         <h2>动态绑定CSS样式</h2>
19         <div>
20             <h4>示例一</h4>
21             <div v-on:click="varChangeColor = !varChangeColor" v-bind:class="{changeColor:varChangeColor}">
22                 <span>点击切换颜色</span>
23             </div>
24
25             <hr>
26             <h4>示例二</h4>
27             <button v-on:click="varChangeColor = !varChangeColor">改变颜色</button>
28             <button v-on:click="varChangeLength = !varChangeLength">改变长度</button>
29             <button v-on:click="varChangeLength = !varChangeLength,varChangeColor = !varChangeColor">两者都改变</button>
30             <!--computed属性封装对象-->
31             <div v-bind:class="computedClass">
32                 <span>测试内容</span>
33             </div>
34         </div>
35
36     </div>
37
38
39 </div>
40 <script src="app.js"></script>
41
42
43 </body>
44 </html>

app.js

 1 var app = new Vue({
 2     el: ‘#app‘,
 3     data: {
 4         varChangeColor: false,
 5         varChangeLength: false,
 6     },
 7     methods: {},
 8
 9     computed: {
10         computedClass: function () {
11             return {
12                 changeColor: this.varChangeColor,
13                 changeLength: this.varChangeLength
14             }
15         },
16     }
17 })

style.css

 1 span {
 2     background: red;
 3     display: inline-block;
 4     padding: 10px;
 5     color: #fff;
 6     margin: 10px 0;
 7 }
 8
 9 .changeColor span {
10     background: green;
11 }
12
13 .changeLength span:after {
14     content: "length";
15     margin-left: 10px;
16 }

截图:

原文地址:https://www.cnblogs.com/gongxr/p/10364459.html

时间: 2024-11-05 18:50:28

Vue之动态绑定CSS样式的相关文章

Vue.js 控制css样式

<script src="https://unpkg.com/vue/dist/vue.js"></script> <style type="text/css"> .blue{ background-color: blue; } .green{ background-color: green; } div{ width: 400px; height: 200px; border-bottom-width: 2px; } </

Vue 框架-05-动态绑定 css 样式

Vue 框架-05-动态绑定 css 样式 今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分 首先说一下 动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 class=""就可以了,使用 Vue 呢之前也介绍过一个 v-bing:class="{{redClass:true}}" ,也可以实现绑定,但都不是动态绑定,动态绑定肯定是根据用户的某个操作实现动态的修改样式 先看下面的第一个小实例: 源代码 html 文件: 请看注释

vue 项目不显示样式 排版错乱

vue中的css 样式都在index.html中 看这里是否有导入css 原文地址:https://www.cnblogs.com/sumafan/p/10807464.html

在vue中使用css modules替代scroped

前面的话 css modules是一种流行的模块化和组合CSS的系统. vue-loader提供了与css modules的集成,作为scope CSS的替代方案.本文将详细介绍css modules 引入 最开始使用Vue的时候,提倡并大量使用的是scoped这种技术 <style scoped> @media (min-width: 250px) { .list-container:hover { background: orange; } } </style> 这个可选 sc

vue 引入通用 css

1.在入口 js 文件 main.js 中引入,一些公共的样式文件,可以在这里引入. import Vue from 'vue' import App from './App' // 引入App这个组件 import router from './router' /* 引入路由配置 */ import axios from 'axios' import '../static/css/global.css' /*引入公共样式*/ 2.在 index.html 中引入,这个不说了: 3.在 app.

vue组件中的样式属性:scoped,解决在父组件中无法修改子组件样式问题

Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使用PostCSS来改变以下内容实现的: <style scoped> .example { color: red; } </style> <template> <div class="example">hi</div> </

CSS样式的优先级

1.相同权值情况下,CSS样式的优先级总结来说,就是--就近原则(离被设置元素越近优先级别越高): 内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中). 2.权值不同时,浏览器是根据权值来判断使用哪种css样式的,哪种样式权值高就使用哪种样式. 下面是权值的规则: 标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100.例如下面的代码: p{color:red;} /*标签,权值为1*/ p span{color:green;} /*两个标签,权值为1+

网站开发综合技术 第二部分 CSS样式表

第2部分 CSS样式表 CSS(Cascading Style Sheets,层叠样式表),作用是美化HTML网页. /*注释*/    注释语法 2.1.样式表的基本概念 2.1.1.样式表分类 1.内联样式表 和html联合显示,控制精确,但是可重用性差,冗余多. 例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独立区域内嵌在网页里,必须写在head标签里边. <style type= "

CSS样式与选择器

CSS构造块的样式: 1.  h1{color:red;background-color:yellow} 其中:h1是选择器,花括号内是声明部分.多个声明之间用分号隔开. 2.为样式规则添加注释:/*...*/.注意不能将一个注释嵌套在另一注释中.如:/*这样做/*是不对的*/因为嵌套在外层注释内*/.注释可以放在样式规则内部.如:img{border:4px solid red;/*margin-right:12px;*/} ,浏览器会显示的只有border样式,因为margin-right