Vue 由单个复选框引发的联想

最新推荐文章于 2024-05-30 08:49:26 发布

PHP__廊外诗鸽

最新推荐文章于 2024-05-30 08:49:26 发布

阅读量2.4k

点赞数 2

分类专栏： vue.js 文章标签： html vue

本文链接：https://blog.csdn.net/tashanhongye/article/details/76473566

版权

vue.js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

关于复选框，我想只要会点html的，大多数会用，但今天在Vue的实例中遇到一个小小的问题引发了我的思考。在此我先把Vue的实例代码贴出来，再来探讨一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="javascript/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <p>单个复选框</p>
        <input type="checkbox" id="checkbox" name="checkbox" v-model="message">
        <label for="checkbox">{{message}}</label>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                message:false
            }
        })
    </script>
</body>
</html>

看到这里还得再次回顾一下v-model指令与label中的for属性。

1: v-model:前面我已经讲过了：http://blog.csdn.net/tashanhongye/article/details/76467851，看下图：

这里写图片描述

2:for属性：

for 属性规定 label 与哪个表单元素绑定。

如上面的代码

    <label for="checkbox">{{message}}</label>

注意for=”checkbox”绑定的是中的id=”checkbox”而不是：name=”checkbox”

 <input type="checkbox" id="checkbox" v-model="message">

下面我们再回过头来看看单个复选框的问题，上面的代码输出的结果如下图：
这里写图片描述

这里写图片描述

细心的发现，当我没有勾选单个复选框的时候，选框后面显示的是false;当我勾选单个复选框的时候，选框后面显示的是true;

我们再看看上面的代码，在script中我并没有给message以”true”的初始值啊，为什么我选择复选框的时候后面会显示true呢？

讲到这里其实我也没有更好的解释，但让我想起了vue样式绑定中的一个例子，在这个例子中可以看出它们之间有着相同的逻辑关系。下面我把代码贴出来：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="javascript/vue.min.js"></script>
    <style>
        .active{
            width:10em;
            height:10em;
            background-color:#00CC00;
        }
    </style>
</head>
<body>
    <div id="app">
        <p v-bind:class="{active:isActive}">helloworld</p>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                isActive:true
            }
        })
    </script>
</body>
</html>

显示的结果如下：

这里写图片描述

当我把下列代码做一点小小的改动时，又会得到另外一种结果：

    <script>
        new Vue({
            el:"#app",
            data:{
                isActive:false
            }
        })
    </script>

我只是把isActive的值改成：isActive:false.结果就发生了改变。结果如下：

这里写图片描述

这一次并没有显示active的样式。

两相比较有着相似之处。

PHP__廊外诗鸽

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 由单个复选框引发的联想

关于复选框，我想只要会点html的，大多数会用，但今天在Vue的实例中遇到一个小小的问题引发了我的思考。在此我先把Vue的实例代码贴出来，再来探讨一下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="javascript/vue.m
复制链接

扫一扫