vue中双向数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--<label for="username">用户名:</label>-->
     <!--<input type="text" v-model="msg" id="username">-->
    <!--<p>{{ msg }}</p>-->
    <!--<textarea name="" id="" v-model="msg"></textarea>-->

  <!--单个复选框 使用列表保存-->
    <!--<label for="checkbox">{{checked}}</label>-->
    <!--<input type="checkbox" id="checkbox" v-model="checked">-->

    <!--多个复选框 使用列表保存-->
    <!--<input type="checkbox" id="jack" value="Jack9" v-model="checkedNames">-->
    <!--&lt;!&ndash;<label for="jack">Jack</label>&ndash;&gt;-->
    <!--<input type="checkbox" id="john" value="John9" v-model="checkedNames">-->
    <!--&lt;!&ndash;<label for="john">John</label>&ndash;&gt;-->
    <!--<input type="checkbox" id="mike" value="Mike9" v-model="checkedNames">-->
    <!--&lt;!&ndash;<label for="mike">Mike</label>&ndash;&gt;-->
    <!--<span>{{ checkedNames }}</span>-->

    <!--下拉菜单-->
    <!--<select name="" id="" v-model="selected">-->
        <!--<option disabled value="">请选择</option>-->
        <!--<option >A</option>-->
        <!--<option >T</option>-->
        <!--<option >Y</option>-->
    <!--</select>-->
    <!--<span>Selected: {{ selected }}</span>-->

     <!--懒监听  input框输入的时候,p标签不同时更新,只有enter一下,p标签才会同步到input标签-->
    <!--<input v-model.lazy="msg" >-->
    <!--<p>{{msg}}</p>-->

      <!--数字显示 type="number"-->
    <!--<input v-model.number="age" type="number">-->
    <!--<p>{{age}}</p>-->


    <!--清除前后空格-->
    <input v-model.trim="msg">
    <p>{{msg}}</p>
</div>

<script src="../vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data(){
            return{
                msg:'',
                checked:true,
                checkedNames:[],
                selected:'' ,
                age:'ffff'

            }
        }
    })
</script>
</body>
</html>

 

posted @ 2018-12-01 17:00  团子emma  阅读(66)  评论(0)    收藏  举报