<body>
<div id="app">
<!-- 单向 用v-bind 绑定属性-->
<input type="checkbox" v-bind:checked="done">
<!-- 双向 用v-model 绑定值 -->
<input type="checkbox" v-model="done">
<!-- 盒子显示和不显示 条件为true则显示-->
<div v-if="done" class="box"></div>
<!-- 将表单提交上来的数据类型由字符串改成数字类型 -->
<input type="text" v-model.number="number">
<!-- 去掉表单提交数据的首尾空格 -->
<input type="text" v-model.trim="number">
<button v-on:click="click">显示数据</button>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
done: true,
number: 34
},
methods: {
click: function () {
console.log(this.number)
}
}
})
</script>
</body>