vue获取div中的值_Vue奇奇怪怪的小技巧

目录

• 1.v-for 循环对象
• 2.动态事件
• 3.“双向绑定” .sync
• 4.获取原始DOM事件
• 5.小型状态管理仓库
• 6.构造器 Vue.extend

1.v-for 循环对象

有时候我们接口所返回数据的是一个对象，但是如果属性太多了，且是一个list，咱们不能一个一个写吧

像这样

<p>{
     {obj.id}}p>
<p>{
     {obj.name}}p>
<p>{
     {obj.age}}p>
...

那如果有更多呢！

老严今年年初之前就碰到过一个接口返回的数据是这样

{
     
    data1:"xxx",
    data2:"xxx",
    data3:"xxx",
    data4:"xxx",
    data5:"xxx",
    ...
    data72:"xxx",
}

一个一个复制？来看看 v-for 的操作吧

html

<div id="app">
    <p v-for="(val, key, index) in info">{
     {index}} - {
     {key}} - {
     {val}}p>
div>

js

new Vue({
     
    el: '#app',
    data: {
     
        info: {
     
            'id': 1,
            'name': '严老师',
            'age': '24'
        }
    }
})