vue中v-model 数据双向绑定

表单输入绑定

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 数据双向绑定

表单输入绑定

最新文章

热门文章