查看: 287|回复: 10

基础10 @click :class 样式的数据类型

[复制链接]
回帖奖励 20 MC币 回复本帖可获得 1 MC币奖励! 每人限 1 次(中奖概率 50%)

170

主题

178

帖子

787

积分

管理员

子枫

Rank: 9Rank: 9Rank: 9

积分
787
发表于 2020-3-24 11:37:35 | 显示全部楼层 |阅读模式
[AppleScript] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<style>
    .cur{
        color: aqua;
    }
</style>
<body>
    <div id="app">
        class 1
        <div 
            @click="btnClick"
            :class="{cur:isAct}"
        >{{message}}</div>

        class 2
        <div 
            @click="btnClick"
            :class="[cur]"
        >{{message}}</div>


        style 1
        <div 
            @click="btnClick"
            :style="styleObj"
        >{{message}}</div>
        style  2
        <div 
            @click="btnClick"
            :style="[styleObj]"
        >{{message}}</div>

    </div>
    
</body>
</html>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            message:'hello',
            isAct:false,
            cur:'',
            styleObj:{
                color:'red'
            }
        },
        methods: {
            btnClick:function(){
                this.isAct= !this.isAct;
                this.cur = 'cur';
                this.styleObj.color='black'
            }
        }
    })
</script>

0

主题

16

帖子

5

积分

新手上路

Rank: 1

积分
5
发表于 2020-3-24 11:38:55 | 显示全部楼层
谢谢您的分享!
回复

使用道具 举报

0

主题

17

帖子

4

积分

新手上路

Rank: 1

积分
4
发表于 2020-3-24 11:48:00 | 显示全部楼层
不错
回复

使用道具 举报

0

主题

15

帖子

10

积分

新手上路

Rank: 1

积分
10
发表于 2020-3-24 13:11:22 | 显示全部楼层
学习了
回复

使用道具 举报

0

主题

16

帖子

4

积分

新手上路

Rank: 1

积分
4
发表于 2020-3-24 13:12:08 | 显示全部楼层
学习了
回复

使用道具 举报

0

主题

15

帖子

8

积分

新手上路

Rank: 1

积分
8
发表于 2020-3-24 19:24:37 | 显示全部楼层
谢谢您的分享!
回复

使用道具 举报

0

主题

13

帖子

4

积分

新手上路

Rank: 1

积分
4
发表于 2020-3-24 19:38:14 | 显示全部楼层
好东西一定要看看!
回复

使用道具 举报

0

主题

5

帖子

10

积分

新手上路

Rank: 1

积分
10
发表于 2020-3-24 20:29:12 | 显示全部楼层
谢谢您的分享!
回复

使用道具 举报

0

主题

7

帖子

3

积分

新手上路

Rank: 1

积分
3
发表于 2020-3-24 22:20:15 | 显示全部楼层
感谢分享
回复

使用道具 举报

0

主题

13

帖子

6

积分

新手上路

Rank: 1

积分
6
发表于 2020-3-24 22:51:01 | 显示全部楼层
感谢
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则