表单输入绑定

  • v-model 数据双向绑定,只能应用在input /textare /select

    <div id="app">
    
    <input type="text" v-model="msg">
    
    <p>{{ msg }}</p>
    
</div>
    
<script src="vue.js"></script>
    
<script>
    
    new Vue({
    
        el: '#app',
    
        data() {
    
            return{
    
                msg: ' alex '
    
            }}
    
    })
    
</script>

  • 示例:

    <!DOCTYPE html>
    
<html lang="en">
    
<head>
    
    <meta charset="UTF-8">
    
    <title>Title</title>
    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <style>
    
        span.active{
    
            color:red;
    
        }
    
    </style>
    
</head>

<body>
    
<div id="app">
    
    <div>
    
        <span @click="handlerClick(index)" v-for = "(category,index) in categoryList" :key="category.id" :class="{active:index==currentIndex}">
    
                                                                                <!--绑定属性-->
    
            {{ category.name }}
    
        </span>

    </div>

</div>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    
<script src='./vue.js'></script>
    
<script>
    
    let vm = new Vue({   // 声明变量  实例化一个对象vm(指的是vue的实例)
    
        el: "#app",    //绑定根元素
    
        //数据属性
    
        data(){  //这里有obsever
    
            //返回的数据跟后端数据库里的有关,如果是动态的数据,存的是数据结构
    
            return {categoryList:[],currentIndex:0}
    
        },
    
        methods:{
    
            handlerClick(i){this.currentIndex=i;}
    
        },
    
        created(){
    
            $.ajax({
    
                //请求后端数据 ****
    
                url:"https://www.luffycity.com/api/v1/course_sub/category/list/",
    
                type:"get",
    
                // success:function(data){
    
                //后端数据渲染回来
    
                success:(data)=>{       //data 一般是从后端返回给前端的
    
                    console.log(data);

                    //Object
    
                        //data:(6) [{…}, {…}, {…}, {…}, {…}, {…}, __ob__: Observer]
    
                        //error_no:0
    
                        //proto__:Object

                    if (data.error_no === 0){
    
                        var data=data.data;
    
                        let obj={
    
                            id:0,
    
                            name:"全部",
    
                            category:"0"
    
                        }
    
                        this.categoryList = data;
    
                        this.categoryList.unshift(obj)
    
                        //把data赋值给categoryList
    
                        console.log(this)//拿到的是一个ajax对象,
    
                        // 所以把上面的匿名函数改成箭头函数

                        //改成箭头函数之后得到的是vue对象
    
                        this.categoryList=data;
    
                    }
    
            },

                error:function(err){
    
                    console.log(err);
    
                }
    
            })
    
        }
    
    })
    
</script>

</body>
    
</html>

vue中v-model 数据双向绑定的更多相关文章

  1. vue中v-model的数据双向绑定(重要)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 解决Vue中文本输入框v-model双向绑定后数据不显示的问题

    前言 项目中遇到一个问题就是在Vue中双向绑定对象属性时,手动赋值属性后输入框的数据不实时更新的问题. <FormItem label="地址" prop="eve ...

  3. vue Object.defineProperty Proxy 数据双向绑定

    Object.defineProperty 虽然已经能够实现双向绑定了,但是他还是有缺陷的. 只能对属性进行数据劫持,所以需要深度遍历整个对象 对于数组不能监听到数据的变化 虽然 Vue 中确实能检测 ...

  4. [vue]通过watch实现数据双向绑定

    modal:单向绑定 <head> <meta charset="UTF-8"> <title>test</title> <s ...

  5. Vue中MVVM模式的双向绑定原理 和 代码的实现

      今天带大家简单的实现MVVM模式,Object.defineProperty代理(proxy)数据   MVVM的实现方式: 模板编译(Compile) 数据劫持(Observer) Object ...

  6. Vue.js学习 Item4 -- 数据双向绑定

    Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue 模板因而从根本上不同于基于字符串的模板,请记住这点. ...

  7. [vue]实现父子组件数据双向绑定

    参考: http://www.cnblogs.com/xxcanghai/p/6124699.html <!DOCTYPE html> <html lang="en&quo ...

  8. 搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式

    搞懂:MVVM模式和Vue中的MVVM模式 MVVM MVVM : model - view - viewmodel的缩写,说都能直接说出来 model:模型,view:视图,view-Model:视 ...

  9. 真正的原生JS数据双向绑定(实时同步)

    真正的原生JS数据双向绑定(实时同步) 接触过vue之后我感觉数据双向绑定实在是太好用了,然后就想着到底是什么原理,今天在简书上看到了一位老师的文章 js实现数据双向绑定 然后写出了我自己的代码 wi ...

  10. vue中数据双向绑定注意点

    最近一个vue和element的项目中遇到了一个问题: 动态生成的对象进行双向绑定是失败 直接贴代码: <el-form :model="addClass" :rules=& ...

随机推荐

  1. Delegate 委托细说

    目录 委托的申明 委托的赋值 委托实例方法的使用C#Invoke\BeginInvoke\Endinoke  系统自带的委托Action.Action<T>.Func<T>.P ...

  2. Linux 组网入门(转)

    转至:https://blog.csdn.net/cuijiao1893/article/details/100397875 Linux 组网入门(转)[@more@]WEB 服务器 现在在Inter ...

  3. Python：读取txt中按列分布的数据，并将结果保存在Excel文件中 && 保存每一行的元素为list

    import xlwt import os def write_excel(words,filename): #写入Excel的函数,words是数据,filename是文件名 wb=xlwt.Wor ...

  4. Python 完美诠释"高内聚"概念的 IO 流 API 体系结构

    1. 前言 第一次接触 Python 语言的 IO API 时,是惊艳的.相比较其它语言所提供的 IO 流 API . 无论是站在使用者的角度还是站在底层设计者的角度,都可以称得上无与伦比. 很多人在 ...

  5. LeetCode-007-整数反转

    整数反转 题目描述:给你一个 32 位的有符号整数 x ,返回将 x 中的数字部分反转后的结果. 如果反转后整数超过 32 位的有符号整数的范围 [\(−2^{31}\), \(2^{31}\) − ...

  6. Spring Boot项目微信云托管入门部署

    微信云托管本身是一个服务器,里面的软件都已经配置好了,直接使用即可,适用于一些简单部署的项目.直接把项目直接上传到服务器即可.无需各种繁琐的软件配置和打包,微信云托管统统给你搞定.而且系统会根据使用量 ...

  7. 二级py--day2

    二级py day2-3 1.进程至少活动情况分为:运行状态.就绪状态.等待状态(阻塞状态).创建状态.终止状态 2.进程的特性包括: 并发性和动态性 3.计算机地址位数决定了内存的最大容量,决定了虚拟 ...

  8. LGP6240题解

    题解 我们可以发现,背包有结合律. 也就是先加入元素 \(a\) 再加入元素 \(b\) 和 \(c\),与先加入元素 \(a\) 后再与只有元素 \(b\) 和元素 \(c\) 的背包合并,得到的背 ...

  9. Linux内核驱动模块编写尝试

    课堂笔记 源代码 /*file: hello.c*/ #ifndef _KERNEL_ #define _KERNEL_ #endif #ifndef MODULE #define MODULE #e ...

  10. MongoDB 镜像配置方法

    镜像下载.域名解析.时间同步请点击 阿里巴巴开源镜像站 MongoDB 是一个基于分布式文件存储的数据库.由 C++ 语言编写.旨在为 WEB 应用提供可扩展的高性能数据存储解决方案. 配置方法 安装 ...