Vue：双向绑定

来自CloudWiki
跳转至： 导航， 搜索

vue里面提供了v-model指令，为我们方便实现Model和View的双向绑定，使用也非常简单。还是上文的例子，我们加入一个文本框，里面使用v-model指令。 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="vue.js" type="text/javascript" charset="utf-8">

		</script>


		<title></title>
	</head>
    <body>
        <div id="app">
            <h1>编辑姓名：<input type="text" v-model="Name" /></h1>
            <h1>姓名：{{ Name }}</h1>
            <h1>年龄：{{ Age }}</h1>
            <h1>学校：{{ School }}</h1>
        </div>

        <script src="Content/vue/dist/vue.js"></script>
        <script type="text/javascript">
        //Model
        var data = {
            Name: '小明',
            Age: 18,
            School:'光明小学',
        }

        //ViewModel
        var vue = new Vue({
            el: '#app',
            data: data,
        });
    
        </script>
    </body>
</html>

效果

Vue2022040101.png

取自“http://www.openbrains.net/mediawiki/index.php?title=Vue：双向绑定&oldid=30037”