精华内容
下载资源
问答
  • 主要介绍了Vue Render函数创建DOM节点代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 本文主要介绍的是vue.js插入dom节点的方法,下面话不多说,来看看详细的介绍吧。 html代码: <div id=app></div> js代码: var MyComponent = Vue.extend({ template: '<div>Hello World</div>' }) var ...
  • Vue实现dom节点的增删改成

    万次阅读 2019-03-08 15:51:36
    在学习了vue框架之后,对前端又有了新的认知,vue框架的使用跟之前的js或者jquery有着很大的不同,在使用js或者jquery,我们首先想到的就是获取页面的节点,然后再来改变或者添加上自己想要的数据,vue则是相反,vue...

    在学习了vue框架之后,对前端又有了新的认知,vue框架的使用跟之前的js或者jquery有着很大的不同,在使用js或者jquery,我们首先想到的就是获取页面的节点,然后再来改变或者添加上自己想要的数据,vue则是相反,vue看重的是数据,通过获取到的一些数据再来改变结构,所以在使用vue框架的时候,就要两种思维切换。今天就来讲下如何使用vue来对表格的进行增删改查。
    1、对表格数据的增加
    先制作好一个静态的表格

        <style>
            *{
                margin: 0;
                padding: 0;
                list-style: none;
            }
            .text{
                width:600px ;
                height: 400px;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translateX(-50%) translateY(-50%);
                z-index: 3;
                background: white;
            }
            .text div:nth-of-type(1){
                line-height: 50px;
                display: flex;
                font-size: 30px;
                margin: 20px auto;
                justify-content: space-between;
                width: 80%;
            }
            .text div{
                margin: 30px  30px;
            }
            .text div:nth-of-type(5){
                margin: 40px 30px;
                height: 40px;
                justify-content: space-between;
                display: flex;
            }
            .text div:nth-of-type(5) button{
                width: 70px;
                color: #469FFF;
                background: #ECF5FF;
                border: 1px solid #469FFF;
            }
            .shadow{
                /*display: none;*/
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 1;
                background: rgba(0,0,0,.4);
            }
            fieldset{
                height: 330px;
                width: 800px;
                margin: 0 auto;
            }
            p{
                margin: 0 auto;
                width: 600px;
            }
            input{
                height: 40px;
            }
            select{
                height: 30px;
                width: 50px;
            }
            fieldset p:nth-of-type(1){
                margin-top: 40px;
            }
            fieldset p:nth-of-type(2){
                margin: 30px auto;
            }
            .est{
                margin-top: 20px;
                margin-left: 130px;
                width: 60px;
                height: 40px;
                background: #009A61;
                color: white;
                cursor: pointer;
            }
            table{
                width: 804px;
                margin: 0 auto;
                border-collapse: collapse;
            }
            thead tr:nth-of-type(1){
                text-align: center;
                height: 40px;
                color: white;
                background:  #009A61;
            }
            td{
                border: 1px solid #D3D3D3;
            }
            #box tr{
                height: 35px;
            }
            #box tr td:nth-of-type(4){
                display: flex;
                justify-content: center;
            }
            .mod{
                width: 40px;
                height: 30px;
                background:  #009A61;
                border: none;
                color: white;
            }
            .delet{
                margin-left: 5px;
                width: 40px;
                height: 30px;
                background:  #009A61;
                border: none;
                color: white;
            }
        </style>
    
    </head>
    <body>
    <section id="bbox">
        <fieldset>
            <legend>创建类目</legend>
            <p>
                <label>名字</label>
                <input type="text" class="na" v-model="chat.name">
            </p>
            <p>
                <label>年龄</label>
                <input type="text" class="age" v-model="chat.age">
            </p>
            <p>
                <label>性别</label>
                <select class="gen" v-model="chat.sex">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </p>
            <button class="est" @click="change">创建</button>
        </fieldset>
        <table>
            <thead>
            <tr>
                <td>姓名</td>
                <td>年龄</td>
                <td>性别</td>
                <td>删除</td>
            </tr>
            </thead>
            <tbody id="box">
            <tr v-for="(item ,index) in char">
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td>{{item.sex}}</td>
                <td><button class="mod" @click="show(index)">修改</button><button class="delet" @click="remove(index)">删除</button></td>
            </tr>
            </tbody>
        </table>
    

    在这里插入图片描述
    用v-for动态生成结构

    <tbody id="box">
            <tr v-for="(item ,index) in char">
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td>{{item.sex}}</td>
                <td><button class="mod" @click="show(index)">修改</button><button class="delet" @click="remove(index)">删除</button></td>
            </tr>
            </tbody>
    
    new Vue({
            el:"#bbox",
            data:{
                num:0,
                char:[{
                    name:"张三",
                    age:"18",
                    sex:"男"}
                ],
    

    另外在设一个新对象chat,当有新数据的时候就可以把数据放到chat,然后把chat添加到数据char中,在点击按钮时触发事件,执行v-for这样就能把数据添加上了。

    change(){
                    if (this.chat.name&&this.chat.age&&this.chat.sex!=""){
                        this.char.push(this.chat);
                        this.chat = {name: '', age: "", sex: ''}
                    }
                }
    

    2、数据的删除
    数据删除比较简单只需要点击删除存储在char中的数据就可以,关键是要知道删除char中的第几条数据,这样就可以利用刚才v-for中的index了。

     remove(index){
                    this.char.splice(index,1)
                },
    

    3、数据的修改
    数据的修改就是点击修改的时候弹出一个框,这个时候就需要做一个子组件当做

    <template id="shadow">
        <div class="shadow">
            <div class="text">
                <div><p>修改</p><p style="text-align: right;font-size: 45px;cursor: pointer" id="turn_of" @click="hid">×</p></div>
                <div>
                    <label>姓名</label>
                    <input type="text" style="width: 450px" id="modname" v-model="sname">
                </div>
                <div>
                    <label>年龄</label>
                    <input type="text" style="width: 450px" id="modage" v-model="sage">
                </div>
                <div>
                    <label>性别</label>
                    <select style="width: 250px" id="modgen" v-model="ssex">
                        <option >男</option>
                        <option>女</option>
                    </select>
                </div>
                <div><button id="sure" @click="send">确认</button><button id="cance" @click="hid">取消</button></div>
            </div>
        </div>
    </template>
    
    components:{
                "show":{
                    template:"#shadow",
                    props:["sna","sag","ssx"],
                    data(){
                        return{
                            sname :this.sna,
                            sage:this.sag,
                            ssex:this.ssx
                        }
                    },
                    watch:{
                        sna:function(val){
                            this.sname = val
                        },
                        sag:function(val){
                            this.sage = val
                        },
                        ssx:function(val){
                            this.ssex = val
                        }
                    },
                    methods:{
                        hid(){
                            this.$emit("hhh")
                        },
                        send(){
                            let obj={
                                name:this.sname,
                                age:this.sage,
                                sex:this.ssex
                            };
                            this.$emit("sen",obj)
                        },
                    }
                }
            }
    

    当打开修改窗时,里面的数据要跟表格上的数据一致,这样就可以在建一个新对象,把选中的那条数据放到新的对象中。

    <show v-show="dis"   @hhh="hide" @sen="newname"  :sna="cht.name" :sag="cht.age" :ssx="cht.sex" ></show>
    
     show(index){
                    this.dis =true;
                    num=index;
                    this.cht.name = this.char[index].name;
                    this.cht.age = this.char[index].age;
                    this.cht.sex = this.char[index].sex;
                },
    
     watch:{
                        sna:function(val){
                            this.sname = val
                        },
                        sag:function(val){
                            this.sage = val
                        },
                        ssx:function(val){
                            this.ssex = val
                        }
                    },
    

    再通过$emit触发自定义事件由子组件向父组件传递数据。
    写的有点乱,把整个完整的代码献上,给各位看官观看,希望对各位有所帮助。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            *{
                margin: 0;
                padding: 0;
                list-style: none;
            }
            .text{
                width:600px ;
                height: 400px;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translateX(-50%) translateY(-50%);
                z-index: 3;
                background: white;
            }
            .text div:nth-of-type(1){
                line-height: 50px;
                display: flex;
                font-size: 30px;
                margin: 20px auto;
                justify-content: space-between;
                width: 80%;
            }
            .text div{
                margin: 30px  30px;
            }
            .text div:nth-of-type(5){
                margin: 40px 30px;
                height: 40px;
                justify-content: space-between;
                display: flex;
            }
            .text div:nth-of-type(5) button{
                width: 70px;
                color: #469FFF;
                background: #ECF5FF;
                border: 1px solid #469FFF;
            }
            .shadow{
                /*display: none;*/
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 1;
                background: rgba(0,0,0,.4);
            }
            fieldset{
                height: 330px;
                width: 800px;
                margin: 0 auto;
            }
            p{
                margin: 0 auto;
                width: 600px;
            }
            input{
                height: 40px;
            }
            select{
                height: 30px;
                width: 50px;
            }
            fieldset p:nth-of-type(1){
                margin-top: 40px;
            }
            fieldset p:nth-of-type(2){
                margin: 30px auto;
            }
            .est{
                margin-top: 20px;
                margin-left: 130px;
                width: 60px;
                height: 40px;
                background: #009A61;
                color: white;
                cursor: pointer;
            }
            table{
                width: 804px;
                margin: 0 auto;
                border-collapse: collapse;
            }
            thead tr:nth-of-type(1){
                text-align: center;
                height: 40px;
                color: white;
                background:  #009A61;
            }
            td{
                border: 1px solid #D3D3D3;
            }
            #box tr{
                height: 35px;
            }
            #box tr td:nth-of-type(4){
                display: flex;
                justify-content: center;
            }
            .mod{
                width: 40px;
                height: 30px;
                background:  #009A61;
                border: none;
                color: white;
            }
            .delet{
                margin-left: 5px;
                width: 40px;
                height: 30px;
                background:  #009A61;
                border: none;
                color: white;
            }
        </style>
    
    </head>
    <body>
    <section id="bbox">
        <fieldset>
            <legend>创建类目</legend>
            <p>
                <label>名字</label>
                <input type="text" class="na" v-model="chat.name">
            </p>
            <p>
                <label>年龄</label>
                <input type="text" class="age" v-model="chat.age">
            </p>
            <p>
                <label>性别</label>
                <select class="gen" v-model="chat.sex">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </p>
            <button class="est" @click="change">创建</button>
        </fieldset>
        <table>
            <thead>
            <tr>
                <td>姓名</td>
                <td>年龄</td>
                <td>性别</td>
                <td>删除</td>
            </tr>
            </thead>
            <tbody id="box">
            <tr v-for="(item ,index) in char">
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td>{{item.sex}}</td>
                <td><button class="mod" @click="show(index)">修改</button><button class="delet" @click="remove(index)">删除</button></td>
            </tr>
            </tbody>
        </table>
        <show v-show="dis"   @hhh="hide" @sen="newname"  :sna="cht.name" :sag="cht.age" :ssx="cht.sex" ></show>
    </section>
    <template id="shadow">
        <div class="shadow">
            <div class="text">
                <div><p>修改</p><p style="text-align: right;font-size: 45px;cursor: pointer" id="turn_of" @click="hid">×</p></div>
                <div>
                    <label>姓名</label>
                    <input type="text" style="width: 450px" id="modname" v-model="sname">
                </div>
                <div>
                    <label>年龄</label>
                    <input type="text" style="width: 450px" id="modage" v-model="sage">
                </div>
                <div>
                    <label>性别</label>
                    <select style="width: 250px" id="modgen" v-model="ssex">
                        <option >男</option>
                        <option>女</option>
                    </select>
                </div>
                <div><button id="sure" @click="send">确认</button><button id="cance" @click="hid">取消</button></div>
            </div>
        </div>
    </template>
    <script src="js/vue.js"></script>
    <script>
       new Vue({
            el:"#bbox",
            data:{
                num:0,
                char:[{
                    name:"张三",
                    age:"18",
                    sex:"男"}
                ],
                chat:{
                    name:"",
                    age:"",
                    sex:""
                },
                cht:{
                    name:"",
                    age:"",
                    sex:""
                },
                dis:false
            },
            methods:{
                change(){
                    if (this.chat.name&&this.chat.age&&this.chat.sex!=""){
                        this.char.push(this.chat);
                        this.chat = {name: '', age: "", sex: ''}
                    }
                },
                remove(index){
                    this.char.splice(index,1)
                },
                show(index){
                    this.dis =true;
                    num=index;
                    this.cht.name = this.char[index].name;
                    this.cht.age = this.char[index].age;
                    this.cht.sex = this.char[index].sex;
                },
                hide(){
                    this.dis=false;
                },
                newname(data){
                    this.dis=false;
                    this.char[num].name=data.name;
                    this.char[num].age = data.age;
                    this.char[num].sex = data.sex;
                }
            },
            components:{
                "show":{
                    template:"#shadow",
                    props:["sna","sag","ssx"],
                    data(){
                        return{
                            sname :this.sna,
                            sage:this.sag,
                            ssex:this.ssx
                        }
                    },
                    watch:{
                        sna:function(val){
                            this.sname = val
                        },
                        sag:function(val){
                            this.sage = val
                        },
                        ssx:function(val){
                            this.ssex = val
                        }
                    },
                    methods:{
                        hid(){
                            this.$emit("hhh")
                        },
                        send(){
                            let obj={
                                name:this.sname,
                                age:this.sage,
                                sex:this.ssex
                            };
                            this.$emit("sen",obj)
                        },
                    }
                }
            }
        })
    
    
    </script>
    </body>
    </html>
    
    展开全文
  • vue 删除 dom节点

    千次阅读 2021-03-24 20:46:26
    moverImg(index){ this.imgList.splice(index,1) },
        moverImg(index){
          this.imgList.splice(index,1)
        },
    
    展开全文
  • VUE获取DOM节点的方法

    千次阅读 2020-08-29 14:39:48
    vue获取DOM节点vue项目中,获取dom节点可以用ref属性,这个属性就是来获取dom对象的。 这个属性就相当于给这个标签起了一个类似于id的东西。 <template> <div class="contaier" ref="box" style="width...

    vue获取DOM节点

    在vue项目中,获取dom节点可以用ref属性,这个属性就是来获取dom对象的。 这个属性就相当于给这个标签起了一个类似于id的东西。

    <template>
        <div class="contaier" ref="box" style="width: 100px;height: 100px;">
            这里用来测试元素的ref属性
        </div>
        <button type="button" @click="showData()">点击</button>
    </template>
    
    <script>
        export default {
            methods: {
                showData() {
                    console.log(this.$refs.box);
                    console.log(this.$refs.box.style);
                }
            }
        }
    </script>
    

    显示的结果为:

    1. <div class="container" style="height: 100px; width: 100px;"></div>
      说明:这里获取的是元素本身
    2. 这里获取到了元素的style属性的值在这里插入图片描述
      综上:我们在vue中需要操作某一个元素的时候,可以在元素上添加ref属性,使用$refs来获取到该元素,进而进行一些列操作。
    展开全文
  • 本篇文章主要介绍了Vue获取DOM元素样式和样式更改示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 2.使用this.refs[′name′]或this.refs['name'] 或 this.refs[′name′]或this.refs.name,即可获取dom节点 this.$refs['div'] 3.获取dom的位置 getBoundingClientRect()可以打印出dom 的位置宽高等信息 this.$refs['...

    vue 获取dom

    1.使用res
    <div class="cover" ref="div"></div>
    2.使用this. r e f s [ ′ n a m e ′ ] 或 t h i s . refs['name'] 或 this. refs[name]this.refs.name,即可获取dom节点
    this.$refs['div']
    3.获取dom的位置 getBoundingClientRect()可以打印出dom 的位置宽高等信息
    this.$refs['div'].getBoundingClientRect()
    4.offsetHeight与offsetWidth可以单独获取w与h

    展开全文
  • Vue渲染DOM节点

    千次阅读 2019-05-17 09:07:33
    Vue实例挂载的最后一个环节:渲染DOM节点。在渲染真实DOM的过程中,Vue引进了虚拟DOM的概念,虚拟DOM作为JS对象和真实DOM中间的一个缓冲存,极大的优化了JS频繁操作DOM的性能问题 浏览器的渲染流程 当浏览器接收到...
  • 这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById(“id”);...如果给子组件加ref,然后获取到该DOM元素之后改变相应的自定义属性的值,vue会报错: Avoid mutating a prop dir
  • Vue虚拟DOM渲染节点

    2020-03-23 22:20:03
    这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、...
  • 在实际项目当中大家一定也会遇到动态添加一行新的DOM节点,例如: 点击添加动态生成一行,我拿到时,很常规的想到 v-html 通过str +=<p>内容</p>添加,但里面有element-ui 会自动过滤掉了显示不出来...
  • VUE—删除当前dom节点

    千次阅读 2019-08-15 14:00:04
    VUE—删除当前dom节点 第一步:v-for循环dom节点,每个li都有一个删除按钮,并绑定删除事件 <ul> <li ref="li" v-for="(item, index) in datahistory" :key="index"> {{item}} <button @click=...
  • [vue] vue怎么获取DOM节点? 1、document.getElementById("id") 2、this.$refs.xx 还有一些特殊的,比如this.$root、this.$parent、this.$children 个人简介 我是歌谣,欢迎和大家一起交流前后端知识。放弃很...
  • vue中操作Dom节点的方法

    千次阅读 2019-09-21 03:34:33
    1.vue中ref操作dom节点 <template> <div id="app"> <div ref="box">1111111111111111</div> <button @click="changeColor">改变</button> </div> ...
  • 本篇文章主要介绍了在vue中获取dom元素内容的方法,可以通过给标签加ref属性,这里整理了详细的代码,有兴趣的可以了解一下
  • 判断页面dom元素是否加载完成 var _this = this var timer = setInterval(function () { // 判断文档和所有子资源(图片、音视频等)已完成加载 if (document.readyState === 'complete') { //执行方法 _this.fn()...
  • vue获取dom节点

    2020-10-28 17:51:45
    Vue在获取dom节点时有时候获取到时undefined,因为是异步的,在我们更新数据时,组件不会立即重新渲染,而是在刷新队列时才进行渲染。解决办法是给延时器。
  • vue获取到dom节点 Vue-stickto (vue-stickto) A vue directive that support multiple DOM Node stick to top automatically. 支持多个DOM节点vue指令会自动粘贴到顶部。 View demo 查看演示 Download Source ...
  • vue实例:添加删除元素r</title> <style type="text/css"> .form-group{ margin:10px; } .form-group>label{ display: inline-block; width: 5rem; text-align: right; } </style> <...
  • 猜测是vue使用的虚拟DOM,使得页面虽然已经渲染出来,但在Vue实例中让处在在虚拟DOM中,无法获取。 解决方法: 使用Vue.nextTick,看下官方材料: ‘在下次 DOM 更新循环结束之后执行延迟回调’,这句话不是特别...
  • vue页面在生成过程中,会先加载页面中的DOM元素,如果我们在页面中使用v-if的判断条件,vue在页面加载的时候是不会生成该DOM节点的,如果我们在v-if条件判断的节点上使用this.$refs,则会出现该DOM没有被注册的情况...
  • Vue实现监听dom节点宽高变化

    万次阅读 2019-10-10 16:15:33
    Vue中实现监听dom节点宽高变化 原生js方法 该方法适用所有vue项目,原生js开发的思维 <div ref="datas"> <div class="scroll_box" ref="scroll" style="width:20%;height: 20%;overflow:scroll;...
  • Vue中操作DOM节点

    2019-12-05 10:56:58
    Vue中一般很少直接操作DOM,但是必可避免的时候需要用到,这时我们可以使用ref 和 refs这两个来实现。ref是被用来给元素或者子组件注册引用信息的,引用信息会注册在父级组件的refs这两个来实现。 ref是被用来给...
  • html代码: <div id="app"></div> js代码: var MyComponent = Vue.extend({ template: '<div>Hello World</div>'...
  • vue获取真实dom节点

    2020-09-15 16:06:49
    获取真实dom节点 1.命名 2.获取 this.$refs.ipt Son 组件 <template> <div id="son"> <h1>{{title}}</h1> <p>我的名字叫{{name}}</p> <input type="text" ref="inp"/...
  • vue.js的插入dom节点方式

    万次阅读 2016-08-31 00:42:17
    &lt;!DOCTYPEhtml&gt; &lt;htmllang="en"&gt; &lt;head&gt; &lt;metacharset="UTF-8"&gt; ...https://npmcdn.com/vue/dist/vue.js"&

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 35,969
精华内容 14,387
关键字:

vue创建dom节点

vue 订阅