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;
    }
</style>

    <div id="container">

         <div v-for="item in someData" class="blue" v-bind:class="{‘green‘: item.selected }" @click="green(item)">
         点我
    </div>
    </div>

<script>

var vm = new Vue({
  el: ‘#container‘,
 data: {
  someData: [{"id":1,selected:true},{"id":2,selected:false},{"id":3,selected:true}]

},
methods:{
    green:function(item){
        item.selected=!item.selected;
    }
}

})

</script>
时间: 2024-10-14 00:22:54

Vue.js 控制css样式的相关文章

JS 控制CSS样式表

JS控制CSS样式,首先得确定一点,CSS与HTML页面的链接方式,因为CSS有3种与HTML页面结合的方式,不同的方式也会产生不同的结果. 下面先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... 1 <style type="text/css"> 2 .orig { 3 display: none; 4 } 5 </style> 你想要改变把他的display属性由none改为inline. 解决办法:

JS控制css

<style> #div1 {position:absolute;left:20px;top:30px;width:20px;height:30px;background-color:red} .red{color: red} .blue{color: blue} </style> <script> var d = 100; function test() { var a = document.getElementById("div1"); a.st

jQuery控制CSS样式

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>控制CSS样式</title> <style type="text/css

js获取css样式方法

一.CSS样式共有三种:内联样式(行间样式).内部样式.外部样式(链接式和导入式) <div id="a" style="width: 100px;height: 100px;"></div> <style type="text/css"> #a{ width: 100px; height: 100px; } </style> <body> <div id="a"

用js控制css属性的问题

在用js控制css属性时,行内css属性可以任意控制,但若是在<style></style>中写的css属性,均不能用alert读取,但是赋值却有几种现象, 第一种:无法读取,能直接赋值 如下: <!DOCTYPE html> <head> <title>新建网页</title> <meta http-equiv="Content-Type" content="text/html; charset=

js 获取css 样式

style只能获取元素的行间样式. 原生代码获取css里的样式,currentStyle只适用于IE,getComputedStyle适用于FF.opera.safari.chrome. function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; } js 获取css 样式

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 <met

JS设置CSS样式的几种方式

用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性  某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign)  如果想保留 - 号,就中括号的形式  element.style['text-align'] = '100px'; element.style.height = '100px'; 2. 直接设置属性(只能用于某些属性,相关样式会自动识别) element.setAttribute('height', 100

js操纵css样式

操作元素的Style样式属性 1.格式对比: 演示代码: css样式属性: background-color color font font-family font-weight ..... JS样式属性: style.backgroundColor style.color style.font style.fontFamily style.fontWeight ..... 2.使用DOM的style对象 javascript样式表分为:内嵌式样式表:内联式样式表:外联式样式表. 操作元素的st