v-model绑定

最新推荐文章于 2024-04-18 16:58:47 发布

锅盖哒

最新推荐文章于 2024-04-18 16:58:47 发布

阅读量1.5k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/A12536365214/article/details/131040623

版权

仅仅只是个人理解，可能不够全面。

v-model绑定就是将两个元素以某一种形式绑定在一起，下面就让我们看看怎么绑定吧。

通过以下代码我们可以看出v-show是一个条件而且color就是他的命名，下面的input就是v-model用它来将二者绑定在一起，默认的话在他不满足条件的情况下是隐藏状态，script里面的就是固定的，当满足v-show的条件他就会显示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <button @click="on" v-show="color=='#ff0000'">点击</button>
        <input type="text" v-model="color" name="" id="">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.js"></script>
    <script>
        Vue.createApp({
            data() {
                return {
                    color:'#ffff00'
                }
            },
            methods:{
            }
        }).mount('#app')
    </script>
</body>

</html>

经过上面的描述，我们来看看效果

不满住条件的情况下是这样的

满足条件的情况下是这样的

这样一看是不是豁然开朗。

本篇博客结束谢谢大家观看。。。

锅盖哒

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
v-model绑定

通过以下代码我们可以看出v-show是一个条件而且color就是他的命名，下面的input就是v-model用它来将二者绑定在一起，默认的话在他不满足条件的情况下是隐藏状态，script里面的就是固定的，当满足v-show的条件他就会显示。v-model绑定就是将两个元素以某一种形式绑定在一起，下面就让我们看看怎么绑定吧。仅仅只是个人理解，可能不够全面。经过上面的描述，我们来看看效果。不满住条件的情况下是这样的。满足条件的情况下是这样的。这样一看是不是豁然开朗。
复制链接

扫一扫