vue双向绑定指令[通俗易懂]

vue双向绑定指令[通俗易懂]vue双向绑定指令

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

   参考来源:

黑马程序员Vue全套视频教程,从vue2.0到vue3.0一套全覆盖,前端必会的框架教程_哔哩哔哩_bilibili

双向绑定指令:

v-model:双向绑定,既有数据源到页面,也有页面到数据源,在不操作DOM的前提下,快速获取表单的数据(v-bind是单向绑定,只有数据源到页面)

功能:

用户输入的数据更改后,数据源的数据自动更改;

数据源的数据更改后,用户界面的数据也更改。

效果展示:

vue双向绑定指令[通俗易懂]

 

代码如下:

<!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>title</title>
</head>
<body>
    <div id="app">
        <!-- input输入框 -->
        <p>用户的名字是:{
  
  { username }}</p>
        <input type="text" v-model="username">
        <hr>
        <!-- textarea -->
        <textarea v-model="text" name="" id="" cols="30" rows="10"></textarea>
        <!-- select下拉框 -->
        <select v-model="city" name="" id="">
            <option value="">请选择</option>
            <option value="1">浙江</option>
            <option value="2">江西</option>
        </select>
    </div>

    <!-- 导入vue的库文件 -->
    <script src="./lib/vue-2.6.12.js"></script>
    
    <!-- 创建vue的实例对象 -->
    <script>
        const vm = new Vue({
            // 表示当前vm实例要控制页面上的哪个区域,接收的值是一个选择器
            el: '#app',
            // data对象就是要渲染到页面上的数据
            data: {
                username: 'xfds',
                text: '123',
                city: ''
            },
            methods: {
                
            }
        })
    </script>
</body>
</html>

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/193883.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 关于SetCapture() 和 ReleaseCapture()的用法的个人理解[通俗易懂]

    关于SetCapture() 和 ReleaseCapture()的用法的个人理解[通俗易懂]1.函数功能:在当前线程的指定窗口里设置鼠标捕获。一旦窗口捕获了鼠标,所有鼠标输入都针对该窗口,无论光标是否在窗口的边界内还是边界外。同一时刻只能有一个窗口捕获鼠标。2.失效条件: A.当鼠标在其他窗口按下;B.调用ReleaseCapture释放。3. SetCapture和ReleaseCapture必须成对出现通俗来讲,例如:一只羊被一根弹性的

  • pycharm2021.4.2激活码_通用破解码

    pycharm2021.4.2激活码_通用破解码,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • Ubuntu彻底卸载jdk「建议收藏」

    Ubuntu彻底卸载jdk「建议收藏」参考链接原链接1、移除所有java相关的包(sun,Oracle,openJDK,lcedTeaplugins,GIJ)#apt-getupdate#apt-cachesearchjava|awk'{print($1)}’|grep-E-e’^(ia32-)?(sun|oracle)-java’-e’^openjdk-‘-e’^icedtea’-e’^(default|gcj)-j(re|dk)’-e’^gcj-(.*)-j(re|dk)’-e’

  • 推荐几个火狐浏览器插件好_安卓火狐浏览器插件

    推荐几个火狐浏览器插件好_安卓火狐浏览器插件致敬思杰马克丁起初马克丁追杀ParallelDesktop,我用VirtualBox,所以我不说话;接着他们追杀几何画板,我用Matl…

  • 网页幻灯片轮播代码_怎么快速实现对幻灯片的统一修改

    网页幻灯片轮播代码_怎么快速实现对幻灯片的统一修改   NetCMS有两种幻灯片显示方式:Flash幻灯片和轮换幻灯片。Flash幻灯片是通过将图片新闻中的图片合成Flash后再在页面上显示。轮换幻灯片则是使用脚本进行控制(准确地说,是使用VBScript)。   其实,这两种显示形式差不多,只不过Flash幻灯片是通过Flash实现图片的过渡效果,而轮换幻灯片是利用IE提供的Filter属性实现图片过渡效果的。   鉴于轮换幻灯片

  • idea 2021.9激活码_最新在线免费激活

    (idea 2021.9激活码)这是一篇idea技术相关文章,由全栈君为大家提供,主要知识点是关于2021JetBrains全家桶永久激活码的内容https://javaforall.cn/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~S32PGH0SQB-eyJsaWNlb…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号