当前位置：网站首页>02_ Data binding

02_ Data binding

2022-07-19 01:36:00 【ID does not exist.】

Data binding

Vue There is 2 A way of data binding ：

One way data binding （v-bind）： Data can only be obtained from data Flow page

Two way data binding （v-model）： Data can be obtained not only from data Flow page , You can also flow from the page to data

Bidirectional binding is generally applied to table elements （ Such as ：input,select etc. ）

v-model：value I could just write it as v-model, because v-model The default collection is value value ]

<body>
    <div id="root">
        <!--  Common writing  -->
        <!--  One way data binding ：<input type="text" v-bind:value="name"><br/>
             Two way data binding ：<input type="text" v-model:value="name"><br/> -->

        <!--  Abbreviation  -->
         One way data binding ：<input type="text" :value="name"><br />
         Two way data binding ：<input type="text" v-model="name"><br />

        <!--  The following code is wrong , because v-model Can only be applied to form class elements （ Input class element ） On  -->
        <!-- <h2 v-model:x="name"> How do you do </h2> -->
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false // prevent  vue  Generate production prompts at startup .

    new Vue({
        el: '#root',
        data: {
            name: '111'
        }
    })
</script>

原网站

版权声明
本文为[ID does not exist.]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/200/202207170004038657.html

当前位置：网站首页>02_ Data binding

02_ Data binding

Data binding

边栏推荐

猜你喜欢

随机推荐