实现Vue框架中数据的双向绑定 

通过v-model实现数据的双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双向绑定</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<!-- view层 模板 -->
<div id="app">
    <!--  通过v-model实现数据双向绑定  -->
    <input type="text" v-model="message"/>{{message}}
    <br/>
    <!--  下拉列表框  -->
    <select v-model="optionValue">
        <!--    为了照顾苹果用户，加上一个默认选项    -->
        <option value="" disabled>--请选择--</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
        <option>D</option>
    </select>
    <span>选中了:{{optionValue}}</span>
</div>

<script type="text/javascript">
    let vue = new Vue({
        el: "#app",
        data: {
            message: "lzp",
            optionValue: ""
        },
        methods: {}
    });
</script>
</body>
</html>


  网页效果：




 






            

            
posted @ 
2021-03-09 20:11 
没有你哪有我 
阅读(109) 
评论(0) 
编辑 
收藏 
举报