Vue--002

最新推荐文章于 2022-03-09 12:45:58 发布

咸鱼超人-

最新推荐文章于 2022-03-09 12:45:58 发布

阅读量65

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_41184530/article/details/104271321

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Vue双向数据绑定

使用v-model来进行双向数据绑定
v-model相当于v-bind和v-on的结合展示

v- model双向绑定只体现在UI控件中
v- model只适用于有value属性

双向绑定的实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!-- v-mode：双向数据绑定 ,只体现在UI控件中，只能应用在有value属性的 
            是v-bind 和 v-on的体现 
        -->
        <div id="app">
            <input type="text" v-model='msg'>
            <h3>{{msg}}</h3>
        </div>
        <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
        <script type="text/javascript">
            new Vue ({
                el:"#app",
                data(){
                    return{
                        msg:"heyuting" 
                    }
                }
                 
            });
        </script>
    </body>
</html>

上述代码实现：使用v-on和v-bind是一样的

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!-- v-mode：双向数据绑定 ,只体现在UI控件中，只能应用在有value属性的 
            是v-bind 和 v-on的体现 
        -->
        <div id="app">
            <input type="text" v-bind:value='msg'  v-on:input='changeValue'>
            <h3>{{msg}}</h3>
        </div>
        <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
        <script type="text/javascript">
            new Vue ({
                el:"#app",
                data(){
                    return{
                        msg:"heyuting" 
                    }
                },
                methods:{
						changeValue(e){
							this.msg = e.target.value;
                        } 
                    }
                    
            });
        </script>
    </body>
</html>

咸鱼超人-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue--002

Vue双向数据绑定使用v-model来进行双向数据绑定v-model相当于v-bind和v-on的结合展示v- model双向绑定只体现在UI控件中v- model只适用于有value属性双向绑定的实现<!DOCTYPE html><html> <head> <meta charset="UTF-8">...
复制链接

扫一扫