vue中v-model 数据双向绑定

vue

表单输入绑定

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

    <div >

    <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 >

    <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 数据双向绑定 的全部内容, 来源链接: utcz.com/z/379838.html

回到顶部