前端案例-30 Vue常用特性案例汇总

最新推荐文章于 2024-07-23 17:06:34 发布

KathyLJQ

最新推荐文章于 2024-07-23 17:06:34 发布

阅读量341

点赞数

分类专栏：前端案例

本文链接：https://blog.csdn.net/kathyljq/article/details/117933837

版权

本文汇总了30个Vue.js的常见特性和使用案例，包括表单操作、表单域修饰符、自定义指令、计算属性、侦听器、用户名验证、过滤器以及日期格式化等，还提供了一个图书管理的综合案例，深入浅出地展示了Vue在实际开发中的应用。

摘要由CSDN通过智能技术生成

表单的操作

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='js/vue.min.js'></script>
    <style>
        input[type='text'] {
     
            width: 300px;
            height: 30px;
        }
        
        #introduction {
     
            width: 250px;
            height: 100px;
        }
        
        select {
     
            width: 300px;
            height: 30px;
        }
        
        div {
     
            margin: 20px;
        }
        
        button {
     
            width: 200px;
            height: 30px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div>
            姓名： <input type="text" v-model='uname'>
        </div>
        <div>
            性别： <input type="radio" name="sex" id="male" value='0' v-model='sex'><label for="sex">男</label>
            <input type="radio" name="sex" id="female" value='1' v-model='sex'><label for="sex">女</label>
        </div>
        <div>
            爱好：<input type="checkbox" name="hoby" id="basket" value='0' v-model='hoby'><label for="hoby">篮球</label>
            <input type="checkbox" name="hoby" id="sing" value='1' v-model='hoby'><label for="hoby">唱歌</label>
            <input type="checkbox" name="hoby" id="coding" value='2' v-model='hoby'><label for="hoby">写代码</label>
        </div>
        <div>
            <!-- select 的multiple属性设置为true时可以多选，vue中以数组的方式接收或赋值 -->
            职业：<select name="job" id="job" multiple=true v-model='job'>
                
                <option value="0">测试</option>
                <option value="1">前端</option>
                <option value="2">后端</option>
                <option value="3">产品</option>
            </select>
        </div>

        <div>
            个人简介：<textarea id="introduction" v-model='description'></textarea>

        </div>
        <div>
            <button>提交</button>
        </div>
    </div>
</body>

<script>
    var v = new Vue({
     
        el: '#app',
        data: {
     
            uname: 'kathy',
            sex: '0',
            // 复选框以数组形式接收或赋值
            hoby: ['0', '1'],
            // <!-- select 的multiple属性设置为true时可以多选，vue中以数组的方式接收或赋值 -->
            job: ['0', '1'],
            description: 'hello'

        }
    })
</script>

</html>

2.表单域修饰符

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

最低0.47元/天解锁文章

KathyLJQ

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录