腾讯十天Vue.js课程之四：编辑便签任务

最新推荐文章于 2023-02-21 19:31:22 发布

xiaotututuer

最新推荐文章于 2023-02-21 19:31:22 发布

阅读量406

点赞数

分类专栏： Vue.js 文章标签：模板

本文链接：https://blog.csdn.net/xiaotututuer/article/details/70245909

版权

Vue.js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

绑定 HTML Class

尽管可以用 Mustache 标签绑定 class，比如 class="{{ className }}"，但是我们不推荐这种写法和 v-bind:class 混用。两者只能选其一！

对象语法

我们可以传给 v-bind:class 一个对象，以动态地切换 class。注意 v-bind:class 指令可以与普通的 class 特性共存：

:class="{completed:item.isChecked,editing:item===editorTodos}"

<input class="edit" v-focus="editorTodos===item" type="text" v-model="item.title" @blur="editorTodoed(item)" @keyup.enter="editorTodoed(item)" @keyup.esc="cancelTodo(item)">

---demo-----

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class</title>
    <style>
        .red{
            color: #f00;
        }
        .fontSize{
            font-size: 50px;
        }
    </style>
    <script src="js/vue.js"></script>
</head>
<body>
<!--模版-->
<div id="demo">
    <span class="fontSize" :class="{red:addClass}">hello, miaov</span>
</div>
<script>
    //        数据
    let obj = {
        addClass: true,
    };
    var vm = new Vue({
        el: "#demo",
        data: obj,
    });

</script>
</body>
</html>

xiaotututuer

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
腾讯十天Vue.js课程之四：编辑便签任务

绑定 HTML Class尽管可以用 Mustache 标签绑定 class，比如 class="{{ className }}"，但是我们不推荐这种写法和 v-bind:class 混用。两者只能选其一！对象语法我们可以传给 v-bind:class 一个对象，以动态地切换 class。注意 v-bind:class 指令可以与普通的 class 特性共存：:class=
复制链接

扫一扫