0%

v-bind/v-model数据绑定

<div id="root">
        <!-- v-bing只可以使得数据流向页面 -->
        单项数据绑定:<input type="text" v-bind:value="name"><br />

        <!-- v-model只适用于表单元素 如input,select等元素-->
        <!-- v-model:value可以简写成v-model,因为v-model默认收集value值 -->
        <!-- v-model既可以使得数据流向页面,也可以使页面流向数据 -->
        双项数据绑定:<input type="text" v-model:value="name">
    </div>


    <script type="text/javascript">
        Vue.config.productionTip = false;
        //创建Vue实例
        new Vue({
            el: '#root',
            //用于指定Vue为哪一个容器服务,值通常为css选择器字符串
            // el: document.getElementById('root')
            data: {
                name: '西南大学',
                school: {
                    name: '卢航我儿',
                    url: 'https://www.baidu.com'
                }
            }
            //data用于存放数据,数据供el所指定容器服务
        })
    </script>