表单输入绑定

  • 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. Service层抽象规范

    Service层是整个web系统的负责业务逻辑一块,最有必要实现抽象,Service层要达到复用性,低耦合性.那么该如何抽象呢?一般遵循以下原则 1.单一职责(SRP) 2.开放-封闭(OCP) 3. ...

  2. Chrome：插件安装

    1.首先要下载一油猴插件管理器 得到crx文件 2.打开'扩展程序',在Chrome右上角 3.启动开发者模式(右上角),然后将油猴crx文件拖入界面中,会自动安装油猴 安装完成后,在工具栏中会出现油 ...

  3. Python：格式化字符串的几种方式

    1.% 'abc%s'%'123' 'abc123' 'abc%s%s'%('123','456') 'abc123456' 当变量v是一个Tuple.List且其中元素数量和字符串中%数量相同时,可 ...

  4. Tableau学习Step4一数据解释、异常值监测、参数使用、分析结果如何对外发布

    Tableau学习Step4一数据解释.异常值监测.参数使用.分析结果如何对外发布 本文首发于博客冰山一树Sankey,去博客浏览效果更好. 一. 前言 本教程通过一个案例从浅到深来学习Tableau ...

  5. LeetCode-129-求根节点到叶节点数字之和

    求根节点到叶节点数字之和 题目描述:给你一个二叉树的根节点 root ,树中每个节点都存放有一个 0 到 9 之间的数字. 每条从根节点到叶节点的路径都代表一个数字: 例如,从根节点到叶节点的路径 1 ...

  6. Spring入门二：整合mybatis

    一.SM思路分析 1.引入核心依赖及相关依赖:  spring(略).mybatis.mysql.mybatis-spring(减少自己实现FactoryBean接口).druid <depen ...

  7. SQL Server--插入一天数据返回ID值

    这里将该功能写成了一个存储过程, 本来只写Insert的话,返回1,即影响的行数,该数据没太大应用意义. 想在Insert的基础上,返回新添加的这条数据的ID,两种方法: 1 .添加第17行的Sele ...

  8. CSS学习Day01

    1.什么是CSS 如何学习 CSS是什么 CSS怎么用 CSS选择器(重点+难点) 美化网页(文字.阴影.超链接.列表.渐变) 盒子模型 浮动 定位 网页动画(特效效果) 1.1什么是CSS Casc ...

  9. 新的ASP.NET Core 迁移指南

    最近在微信里做了一个调查: Web Forms应用程序升级到.NET 6, 收到550份调查,调查还在继续,欢迎参与调查.可以访问链接:https://wj.qq.com/s2/9822949/ac3 ...

  10. Fedora 阿里云源

    镜像下载.域名解析.时间同步请点击 阿里巴巴开源镜像站 简介 Fedora 是一个 Linux 发行版,是一款由全球社区爱好者构建的面向日常应用的快速.稳定.强大的操作系统.它允许任何人自由地使用.修 ...