Vue之动态绑定CSS样式

vue

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/vue@2.5.21/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 }

截图:

以上是 Vue之动态绑定CSS样式 的全部内容, 来源链接: utcz.com/z/375548.html

回到顶部