Vue笔记(五) 表单输入绑定 过渡&动画

最新推荐文章于 2024-03-02 16:51:41 发布
最新推荐文章于 2024-03-02 16:51:41 发布
阅读量166 收藏
点赞数
分类专栏： # Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36154832/article/details/104571686
版权

表单输入绑定

使用 v-model 对表单数据自动收集
1) text/textarea
2) checkbox
3) radio
4) select

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="./js/vue.min.js"></script>
</head>

<body>
    <div id="demo">
        <form @submit.prevent="handleSubmit">
            <span>用户名: </span> <input type="text" v-model="user.username"><br>
            <span>密码: </span> <input type="password" v-model="user.pwd"><br>
            <span>性别: </span> <input type="radio" id="female" value="female" v-model="user.sex">
            <label for="female">女</label>
            <input type="radio" id="male" value="male" v-model="user.sex">
            <label for="male">男</label><br>

            <span>爱好: </span> <input type="checkbox" id="basket" value="basketball" v-model="user.likes">

            <label for="basket">篮球</label> <input type="checkbox" id="foot" value="football" v-model="user.likes">
            <label for="foot">足球</label> <input type="checkbox" id="pingpang" value="pingpang" v-model="user.likes">
            <label for="pingpang">乒乓</label><br>
            <span>城市: </span>
            <select v-model="user.cityId">
                <option value="">未选择</option>
                <option v-for="city in allCitys" :value="city.id"> {{ city.name }} </option>
            </select><br>
            <span>介绍: </span> <textarea v-model="user.desc" rows="10"></textarea><br><br> <input type="submit"
                value="注册">
        </form>
    </div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el: '#demo',
        data: {
            user: {
                username: '',
                pwd: '',
                sex: 'female',
                likes: [],
                cityId: '',
                desc: '',
            },
            allCitys: [{
                id: 1,
                name: 'BJ'
            }, {
                id: 2,
                name: 'SZ'
            }, {
                id: 4,
                name: 'SH'
            }],
        },
        methods: {
            handleSubmit(event) {
                alert(JSON.stringify(this.user))
            }
        }
    })
</script>

</html>

 

过渡&动画

vue 动画的理解
1) 操作 css 的 trasition 或 animation
2) vue 会给目标元素添加/移除特定的 class
3) 过渡的相关类名
xxx-enter-active: 指定显示的
transition xxx-leave-active: 指定隐藏的
transition xxx-enter/xxx-leave-to: 指定隐藏时的样式

基本过渡动画的编码
1) 在目标元素外包裹<transition name="xxx">
2) 定义 class 样式
指定过渡样式:
transition 指定隐藏时的样式:
opacity/其它

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="./js/vue.min.js"></script>
    <style>
        .fade-enter-active,
        .fade-leave-active {
            transition: opacity .5s
        }

        .fade-enter,
        .fade-leave-to {
            opacity: 0
        }

        /* 可以设置不同的进入和离开动画 */
        .slide-fade-enter-active {
            transition: all .3s ease;
        }

        .slide-fade-leave-active {
            transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
        }

        .slide-fade-enter,
        .slide-fade-leave-to {
            transform: translateX(10px);
            opacity: 0;
        }
    </style>
</head>

<body>
    <div id="demo1"> <button @click="show = !show"> Toggle1 </button>
        <transition name="fade">
            <p v-if="show">hello</p>
        </transition>
    </div>
    <div id="demo2"> <button @click="show = !show"> Toggle2 </button>
        <transition name="slide-fade">
            <p v-if="show">hello</p>
        </transition>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#demo1',
        data: {
            show: true
        }
    })
    new Vue({
        el: '#demo2',
        data: {
            show: true
        }
    })
</script>

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="./js/vue.min.js"></script>
    <style>
        .bounce-enter-active {
            animation: bounce-in .5s;
        }

        .bounce-leave-active {
            animation: bounce-in .5s reverse;
        }

        @keyframes bounce-in {
            0% {
                transform: scale(0);
            }

            50% {
                transform: scale(1.5);
            }

            100% {
                transform: scale(1);
            }
        }
    </style>
</head>

<body>
    <div id="test2"> <button @click="show = !show">Toggle show</button> <br>
        <transition name="bounce">
            <p v-if="show" style="display: inline-block">Look at me!</p>
        </transition>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#test2',
        data: {
            show: true
        }
    })
</script>

</html>

 

钦拆大仁
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue学习笔记05表单输入绑定
asdfghjkl_zth的博客
01-16 171
文章目录Vue学习笔记05表单输入绑定基础用法 Vue学习笔记05表单输入绑定 基础用法 可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 注意： v-model 会忽略所有表单元素的 value、checked、selected
Vue学习笔记之表单输入控件绑定
12-11
表单输入绑定 基础用法 文本 <input v-model:"msg" placeholder="edit me"/> ### 多行文本 <textarea name="" id="" cols="30" rows="10" v-model:"msg"></textarea> ### 复选框 爱好 <...
vue class绑定和过渡
weixin_44752891的博客
05-11 234
html部分 1. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="example-2"> &l...
vue的表单数据绑定、修饰符、声明周期和过渡动画
qq_50855179的博客
10-29 115
vue的表单数据绑定、修饰符、声明周期和过渡动画 1.表单元素：input 单选，多选，下拉 下拉多选 文本域 提交 1.1单选 <!-- radio:若要互斥，那么需要通过value绑定属性值，此时v-model会通过value值找到对应的属性进行绑定 --> 性别:<input type="radio" v-model='sex' value="男">男 <input type="radio" v-model='sex' value="女">女 <
Flex 中在表单(Form组件)上填加动画效果(Effect)
sebastain的专栏
08-25 693
核心提示:FormItem的 visible 和 includeInLayout 属性就绑定到这个 advanced 值上, 前者负责显示和隐藏，后者负责计算位置，可以看一下文档...   首先我们建立了一个 private bindable 变量叫做 "
Vue表单输入绑定
象在舞的技术专栏
08-27 370
本博客记录了小编在学习Vue过程中的体会与感悟，简单来说就是小编的学习笔记，学习地址主要为Vue的官网，官网地址为：《Vue官方文档》。相关学习笔记会记录在我的博客专栏《前端Vue》中，欢迎大家关注~ 一、基础用法 可以使用v-model指令在<input>、<textarea>、<select>元素上创建双向数据绑定。它会根据...
Vue学习笔记之表单输入绑定
beenle_m的博客
01-20 275
表单输入绑定 v-model 值绑定 1 对于单选按钮，复选框及选择框的选项，v-model绑定的值通常是静态字符串 (对于复选框也可以是布尔值)： <!-- 当选中时，`picked` 为字符串 "a" --> <input type="radio" v-model="picked" value="a"> <!-- `toggle` ...
vue学习笔记13-表单输入绑定
nicooooooooooooo的博客
03-02 328
在前端处理表单时，我们常常需要将表单输入框的内容同步给Javascript中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦，百度搜索栏如下，输入什么同步读取，反馈数据。只要用户输入存在的地方基本离不开表单。框中输入什么，下面同步显示什么。单一复选框，绑定布尔类型值。指令帮我们简化了这一步骤。
Vue.js 3.0 学习笔记（八）表单输入绑定
qq_44648936的博客
03-11 591
一、实现双向数据绑定 双向绑定：就是无论是通过input还是通过Vue对象，都能修改绑定的数据对象的值 Vue通过v-model实现，其本质其实就是语法糖。 v-model会忽略所有表单元素的vlaue、checked、selected特性的初始值，而总是将Vue实例的数据作为数据来源 二、单行文本输入框 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>绑定单行
Vue 学习笔记 8 —— 表单输入绑定
我有两颗糖
03-06 159
1. 基础用法 使用 v-model 对表单元素创建双向数据绑定，表单元素包括 input、textarea 和 select。 需要注意的是，v-model 会忽略所有表单元素的初始 attribute 值，因此在 Vue 实例中需要声明初始值。 v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件： text 和 textarea 元素使用 value property 和 input 事件； checkbox 和 radio 使用 checked property
Vue.js 过渡 & 动画
12-13
Vue.js 过渡 & 动画 本章节我们主要讨论 Vue.js 的过渡效果与动画效果。 过渡 Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。 Vue 提供了内置的过渡封装组件，该组件用于包裹要实现过渡效果...
Vue表单输入绑定的示例代码
10-17
主要介绍了Vue表单输入绑定的示例代码，本文使用v-model指令在表单input创建双向数据绑定，非常具有实用价值，需要的朋友可以参考下
QT5开发及实例配套源代码.zip
05-28
QT5开发及实例配套[源代码]，Qt是诺基亚公司的C++可视化开发平台，本书以Qt 5作为平台，每个章节在简单介绍开发环境的基础上，用一个小实例，介绍Qt 5应用程序开发各个方面，然后系统介绍Qt 5应用程序的开发技术，一般均通过实例介绍和讲解内容。最后通过三个大实例，系统介绍Qt 5综合应用开发。光盘中包含本书教学课件和书中所有实例源代码及其相关文件。通过学习本书，结合实例上机练习，一般能够在比较短的时间内掌握Qt 5应用技术。本书既可作为Qt 5的学习和参考用书，也可作为大学教材或Qt 5培训用书。
grpcio-1.46.3-cp37-cp37m-musllinux_1_1_i686.whl
最新发布
05-28
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
大学生毕业答辨ppt免费模板【不要积分】下载可编辑可用(138).zip
05-28
大学生毕业答辨ppt免费模板【不要积分】下载可编辑可用(138).zip
Eclipse的C/C++自动补全插件org.eclipse.cdt.ui-7.3.100.202111091601
05-28
Eclipse的C/C++自动补全插件,制作参考:https://blog.csdn.net/kingfox/article/details/104121203?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-1-104121203-blog-117118786.235%5Ev43%5Epc_blog_bottom_relevance_base1&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-1-104121203-blog-117118786.235%5Ev43%5Epc_blog_bottom_relevance_base1&utm_relevant_index=2
大学生毕业答辨ppt免费模板【不要积分】下载可编辑可用(137).zip
05-28
大学生毕业答辨ppt免费模板【不要积分】下载可编辑可用(137).zip
VB网络多人聊天系统的设计与实现(论文+源代码).rar
05-28
计算机专业毕业时间之VB精品论文源代码资源
vue data和表单绑定
04-25
Vue中的数据绑定是通过双向数据绑定来实现的，当数据发生变化时会自动更新视图，当用户输入表单数据时，Vue会将数据更新到相应的数据对象中，从而实现表单和数据的绑定。具体来说，当表单元素的值发生变化时，Vue会...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值