Vue—v-for与v-model的使用

1.v-for结合实例使用


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div id="app">
    <span>{{user.name}}{{user.age}}span>
    <hr>








    <span v-for="(key,value) in user">
        {{value}}:{{key}}
    span>
    
    <hr>
<ul>
    <li v-for="a in list">{{a}}li>
ul>
    <hr>
    <ul>
        <li v-for="user,index in userlist" :key="user.id">
            {{index+1}}
            {{user.id}}
            {{user.name}}
            {{user.age}}
            {{user.aihao}}
        li>
    ul>
    
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            user:{name:"小文",age:22},
            list:["广东","四川","成都"],
            userlist:[
                {id:1,name:"wenxin1",age:"18",aihao:"编程1"},
                {id:2,name:"wenxin2",age:"18",aihao:"编程2"},
                {id:3,name:"wenxin3",age:"18",aihao:"编程3"},
                {id:4,name:"wenxin4",age:"18",aihao:"编程4"},
                ]
        },
        methods: {}
    })
script>
body>
html>
html>```
2.v-model:用来绑定标签元素的值与vue实例对象中data数据保持一致,从而**实现双向数据绑定(表单中的数据导致vue实例data数据变化,vue实例data数据变化导致表单数据变化)**

```html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>

<div id="app">
    <input type="text" v-model="message">
    <hr>
    <span>{{message}}span>
    <hr>
    <input type="button" value="点我改变data中message的值" @click="change">

div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            message:""
        },
        methods: {
            change(){
                this.message="wenwenwen"
            }

        }
    })
script>
body>
html>

3.MVVM架构 双向绑定机制
model: 数据,vue实例中绑定的数据
vm:ViewModel 监听器
view :页面,页面展示的数据

你可能感兴趣的:(vue-前后端分离,vue)