Vue.js之属性绑定及v-model的实现原理

最新推荐文章于 2024-05-25 09:23:30 发布

cloudOnSkyline

最新推荐文章于 2024-05-25 09:23:30 发布

阅读量470

点赞数 2

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

本文链接：https://blog.csdn.net/weixin_44827643/article/details/125695988

版权

JavaScript 专栏收录该内容

61 篇文章 0 订阅

订阅专栏

本文介绍如何利用Vue.js进行元素属性的绑定，通过以下案例进行介绍：开始时，点击“百度”，页面会跳转至百度页面。点击“切换网址”后，再点击“百度”时，页面会跳转至淘宝页面。

1.属性绑定

Vue.js通过v-bind指令进行属性绑定，这样类似于给属性赋值了一个变量，当变量的值更改以后，属性的值也会发生变化。注意：“v-bind:”可以简写“:”

2.案例展示

代码如下：

<!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="vueArea">
        <!-- 可简写为":"-->
        <a v-bind:href="url">百度</a>
        <button @click="changeURL">切换网址</button>
    </div>
    <script src="./vue.min.js"></script>
    <script>
        var vueArea = new Vue({
            el: '#vueArea',
            data: {
                url: 'http://www.baidu.com'
            },
            methods: {
                changeURL() {
                    this.url = 'http://www.taobao.com'
                }
            }
        })
    </script>
</body>

</html>

3.v-model的实现原理

根据前文所述，v-model用于实现数据的双向绑定。其实现原理就是：通过v-bind将数据绑定给表单的value值，同时给表单绑定input监听事件，将input的值再赋给相应的数据，由此实现数据的双向绑定。

代码如下：

<!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">
        <!-- v-model双向数据绑定 -->
        <div><input type="text" v-model="d"></div>
        <div v-text="d"></div>
        <!-- v-model的实现原理 -->
        <div><input type="text" :value="c" @input="c=$event.target.value"></div>
        <div v-text="c"></div>
    </div>
    <script src="./vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                d: '12',
                c: '24'
            }
        })
    </script>
</body>

</html>

cloudOnSkyline

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
Vue.js之属性绑定及v-model的实现原理

本文介绍如何利用Vue.js进行元素属性的绑定，通过以下案例进行介绍：开始时，点击“百度”，页面会跳转至百度页面。点击“切换网址”后，再点击“百度”时，页面会跳转至淘宝页面。Vue.js通过v-bind指令进行属性绑定，这样类似于给属性赋值了一个变量，当变量的值更改以后，属性的值也会发生变化。注意：“v-bind:”可以简写“:” 代码如下：3.v-model的实现原理根据前文所述，v-model用于实现数据的双向绑定。其实现原理就是：通过v-bind将数据绑定给表单的value值，同时给表单绑定
复制链接

扫一扫

专栏目录