v-model 实例

最新推荐文章于 2024-04-09 14:48:57 发布

weixin_34372728

最新推荐文章于 2024-04-09 14:48:57 发布

阅读量88

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xu951128/p/7264154.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>v-model 实例</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>v-model 实例</h1>
<hr>
<div id="app">
    <p>原始文本信息：{{message}}</p><br/>
    <h3>文本框</h3>
    <p>v-model:<input type="text" v-model="message"></p>
    <p>v-model.lazy<input type="text" v-model.lazy="message"></p>
    <p>v-model.number<input type="text" v-model.number="message"></p>
    <p>v-model.trim<input type="text" v-model.trim="message"></p>
    <hr>
    <h3>文本域</h3>
    <textarea name="" id="" cols="30" rows="10" v-model="message"></textarea>
    <hr>
    <h3>多选框绑定一个值</h3>
    <input type="checkbox" id="isTrue" v-model="isTrue">
    <lable for="isTrue">{{isTrue}}</lable>
    <hr>
    <h3>多选框绑定数组</h3>
    <p>
        <input type="checkbox" id="xurui" value="xurui" v-model="web_names">
        <lable for="isTrue">xurui</lable>
        <input type="checkbox" id="xu" value="xu" v-model="web_names">
        <lable for="isTrue">xu</lable>
        <input type="checkbox" id="rui" value="rui" v-model="web_names">
        <lable for="isTrue">rui</lable>
    </p>
    <p>{{web_names}}</p>
    <hr>
    <h3>单选框绑定</h3>
    <p>
        <input type="radio" id="one" value="男" v-model="sex">
        <lable for="one">男</lable>
        <input type="radio" id="two" value="女" v-model="sex">
        <lable for="two">女</lable>
        <p>你选择的性别是：{{sex}}</p>
    </p>
</div>
<script type="text/javascript">
    var app = new Vue({
        el:'#app',
        data:{
            message:'hello world',
            isTrue:true,
            web_names:[],
            sex:'男'
        }
    })
</script>
</body>
</html>