精华内容
下载资源
问答
  • var div=t.$refs.newsBox; div.scrollTop = div.scrollHeight; 如果需要异步的话可以加上setTimeout
    var div=t.$refs.newsBox;
    div.scrollTop = div.scrollHeight;
    

    如果需要异步的话可以加上setTimeout

    展开全文
  • div添加样式 vue_vue.js

    2020-12-30 14:44:57
    -- 将来 new 的Vue实例,会控制这个 元素中的所有内容 --> <!-- Vue 实例所控制的这个元素区域,就是我们的 V --> <div id="app"> <p>{{ msg }}</p> </div> <...

    5c1a340d86cd39c7fae0bba1ca3c916a.png

    vue.js 中M V MV代表哪一部分

    <body>
      <!-- 将来 new 的Vue实例,会控制这个 元素中的所有内容 -->
      <!-- Vue 实例所控制的这个元素区域,就是我们的 V  -->
      <div id="app">
        <p>{{ msg }}</p>
      </div>
    
      <script>
        //  注意:我们 new 出来的这个 vm 对象,就是我们 MVVM中的 VM调度者
        var vm = new Vue({
          el: '#app',  // 表示,当前我们 new 的这个 Vue 实例,要控制页面上的哪个区域
          // 这里的 data 就是 MVVM中的 M,专门用来保存 每个页面的数据的
          data: { // data 属性中,存放的是 el 中要用到的数据
            msg: '欢迎学习Vue' 
          }
        })
      </script>
    </body>

    插值表达式(v-cloak v-text v-html v-bind(缩写是:) v-on(缩写是@) v-model v-for v-if v-show )

    <body>
      <div id="app">
        <!-- 使用 v-cloak 能够解决 插值表达式闪烁(在网络不好的情况下{{ msg }}展示出来)的问题 
          不会覆盖元素中原本的内容-->
        <p v-cloak>++++++++ {{ msg }} ----------</p>
     
        <!-- 默认 v-text 是没有闪烁问题的-->
        <!-- v-text会覆盖元素中原本的内容,但是 插值表达式  只会替换自己的这个占位符,
        不会把整个元素的内容清空 -->
        <h4 v-text="msg">==================</h4>
        <div>{{msg2}}</div>
    
         <!-- v-html会覆盖元素中原本的内容 解析标签 -->
        <div v-html="msg2">1212112</div>
    
        <!-- v-bind: 是 Vue中,提供的用于绑定属性的指令 -->
        <!-- v-bind 只能实现数据的单向绑定,从 M 自动绑定到 V, 无法实现数据的双向绑定  -->
        <!-- 注意: v-bind: 指令可以被简写为 :要绑定的属性 -->
        <!-- v-bind 中,可以写合法的JS表达式 -->
        <!-- <input type="button" value="按钮" v-bind:title="mytitle + '123'"> -->
       
    
        <!-- Vue 中提供了 v-on: 事件绑定机制 -->
        <!-- <input type="button" value="按钮" :title="mytitle + '123'" v-on:click="alert('hello')"> -->
    
        <!-- 使用  v-model 指令,可以实现 表单元素和 Model 中数据的双向数据绑定 -->
        <!-- 注意: v-model 只能运用在 表单元素中 -->
        <!-- input(radio, text, address, email....)   select    checkbox   textarea   -->
        <input type="text" style="width:100%;" v-model="msg">
    
        <!-- v-if 的特点:每次都会重新删除或创建元素 -->
        <!-- v-show 的特点: 每次不会重新进行DOM的删除和创建操作,只是切换了元素的 display:none 样式 -->
    
        <!-- v-if 有较高的切换性能消耗 -->
        <!-- v-show 有较高的初始渲染消耗 -->
    
        <!-- 如果元素涉及到频繁的切换,最好不要使用 v-if, 而是推荐使用 v-show -->
        <!-- 如果元素可能永远也不会被显示出来被用户看到,则推荐使用 v-if -->
        <h3 v-if="flag">这是用v-if控制的元素</h3>
        <h3 v-show="flag">这是用v-show控制的元素</h3>
      </div>
    
    
         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
      <script>
        var vm = new Vue({
          el: '#app',
          data: {
            msg: '123',
            msg2: '<h1>哈哈我骄傲</h1>',
            mytitle: '这是一个自己定义的title'
          },
          methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法
            show: function () {
              alert('Hello')
            }
          }
        })
      </script>
    </body>

    v-for

    <body>
      <div id="app">
       <!-- i索引值-->
        <p v-for="(item, i) in list">索引值:{{i}} --- 每一项:{{item}}</p>
        <p v-for="(user, i) in list2">Id:{{ user.id }} --- 名字:{{ user.name }} --- 索引:{{i}}</p>
        <!-- 注意:在遍历对象身上的键值对的时候, 除了 有  val  key  ,在第三个位置还有 一个 索引  -->
        <p v-for="(val, key, i) in user">值是: {{ val }} --- 键是: {{key}} -- 索引: {{i}}</p> 
    
        <!-- in 后面我们放过  普通数组,对象数组,对象, 还可以放数字 -->
        <!-- 注意:如果使用 v-for 迭代数字的话,前面的 count 值从 1 开始 -->
        <p v-for="count in 10">这是第 {{ count }} 次循环</p> 
    
    </div>
    
      <script>
        // 创建 Vue 实例,得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {
             list: [1, 2, 3, 4, 5, 6],
             list2: [
              { id: 1, name: 'zs1' },
              { id: 2, name: 'zs2' },
              { id: 3, name: 'zs3' },
              { id: 4, name: 'zs4' }
            ],
             user: {
              id: 1,
              name: '托尼·屎大颗',
              gender: '男'
            }
          },
          methods: {}
        });
      </script>
    </body>
    

    v-for循环中key属性的使用

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
       <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    
    <body>
      <div id="app">
    
        <div>
          <label>Id:
            <input type="text" v-model="id">
          </label>
    
          <label>Name:
            <input type="text" v-model="name">
          </label>
    
          <input type="button" value="添加" @click="add">
        </div>
    
        <!-- 注意: v-for 循环的时候,key 属性只能使用 number获取string -->
        <!-- 注意: key 在使用的时候,必须使用 v-bind 属性绑定的形式,指定 key 的值 -->
        <!-- 在组件中,使用v-for循环的时候,或者在一些特殊情况中,如果 v-for 有问题,必须 在使用 v-for 的同时,指定 唯一的 字符串/数字 类型 :key 值 -->
        <p v-for="item in list" :key="item.id">
          <input type="checkbox">{{item.id}} --- {{item.name}}
        </p>
      </div>
    
      <script>
        // 创建 Vue 实例,得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {
            id: '',
            name: '',
            list: [
              { id: 1, name: '李斯' },
              { id: 2, name: '嬴政' },
              { id: 3, name: '赵高' },
              { id: 4, name: '韩非' },
              { id: 5, name: '荀子' }
            ]
          },
          methods: {
            add() { // 添加方法
              this.list.unshift({ id: this.id, name: this.name })
            }
          }
        });
      </script>
    </body>
    
    </html>

    事件修饰符 : .stop .prevent .capture .self .once

      <div id="app">
    
        <!-- 使用  .stop  阻止冒泡 -->
        <!-- <div class="inner" @click="div1Handler">
          <input type="button" value="戳他" @click.stop="btnHandler">
        </div> -->
    
        <!-- 使用 .prevent 阻止默认行为 -->
        <!-- <a href="http://www.baidu.com" @click.prevent="linkClick">有问题,先去百度</a> -->
    
        <!-- 使用  .capture 实现捕获触发事件的机制 -->
        <!-- <div class="inner" @click.capture="div1Handler">
          <input type="button" value="戳他" @click="btnHandler">
        </div> -->
    
        <!-- 使用 .self 实现只有点击当前元素时候,才会触发事件处理函数 -->
        <!-- <div class="inner" @click="div1Handler">
          <input type="button" value="戳他" @click="btnHandler">
        </div> -->
    
        <!-- 使用 .once 只触发一次事件处理函数 -->
        <!-- <a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题,先去百度</a> -->
    
    
        <!-- 演示: .stop 和 .self 的区别 -->
        <!-- <div class="outer" @click="div2Handler">
          <div class="inner" @click="div1Handler">
            <input type="button" value="戳他" @click.stop="btnHandler">
          </div>
        </div> -->
    
        <!-- .self 只会阻止自己身上冒泡行为的触发,并不会真正阻止 冒泡的行为 -->
        <!-- <div class="outer" @click="div2Handler">
          <div class="inner" @click.self="div1Handler">
            <input type="button" value="戳他" @click="btnHandler">
          </div>
        </div> -->
    
      </div>

    vue.js中的样式 class 样式 style 样式

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
      <style>
        .red {
          color: red;
        }
    
        .thin {
          font-weight: 200;
        }
    
        .italic {
          font-style: italic;
        }
    
        .active {
          letter-spacing: 0.5em;
        }
      </style>
    </head>
    
    <body>
      <div id="app">
        <!-- <h1 class="red thin">这是一个很大很大的H1,大到你无法想象!!!</h1> -->
    
        <!-- 第一种使用方式,直接传递一个数组,注意: 这里的 class 需要使用  v-bind 做数据绑定 -->
        <!-- <h1 :class="['thin', 'italic']">这是一个很大很大的H1,大到你无法想象!!!</h1> -->
    
        <!-- 在数组中使用三元表达式 -->
        <!-- <h1 :class="['thin', 'italic', flag?'active':'']">这是一个很大很大的H1,大到你无法想象!!!</h1> -->
    
        <!-- 在数组中使用 对象来代替三元表达式,提高代码的可读性 -->
        <!-- <h1 :class="['thin', 'italic', {'active':flag} ]">这是一个很大很大的H1,大到你无法想象!!!</h1> -->
    
        <!-- 在为 class 使用 v-bind 绑定 对象的时候,对象的属性是类名,由于 对象的属性可带引号,也可不带引号,所以 这里我没写引号;  属性的值 是一个标识符 -->
        <h1 :class="classObj">这是一个很大很大的H1,大到你无法想象!!!</h1>
    
    
      </div>
    
      <script>
        // 创建 Vue 实例,得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {
            flag: true,
            classObj: { red: true, thin: true, italic: false, active: false }
          },
          methods: {}
        });
      </script>
    
    <div id="app2">
        <!-- 对象就是无序键值对的集合 -->
        <!-- <h1 :style="styleObj1">这是一个h1</h1> -->
    
        <h1 :style="[ styleObj1, styleObj2 ]">这是一个h1</h1>
      </div>
    
      <script>
        // 创建 Vue 实例,得到 ViewModel
        var vm = new Vue({
          el: '#app2',
          data: {
            styleObj1: { color: 'red', 'font-weight': 200 },
            styleObj2: { 'font-style': 'italic' }
          },
          methods: {}
        });
      </script>
    </body>
    
    </html>
    展开全文
  • vue+element项目动态添加删除数据div 效果如下: 1、初始状态 2、点击添加两条数据 3、删除第一条数据 代码如下: <el-form-item> <p>任务内容:</p> <el-button type="primary" v-on:...

    vue+element项目动态添加删除数据div

    效果如下:

    1、初始状态

    在这里插入图片描述

    2、点击添加两条数据

    在这里插入图片描述

    3、删除第一条数据

    在这里插入图片描述

    代码如下:

    <el-form-item>
        <p>任务内容:</p>
        <el-button type="primary" v-on:click="addTest">添加</el-button>
    </el-form-item>
    <div>
        <el-form-item v-for="(item,index) in items" :key = "index" >
          <p>任务{{index+1}}:</p>
            <el-select v-model="item.task_cate" style = "width: 13%;" placeholder="选择任务类型">
                <el-option label="参与竞拍" value="0"></el-option>
                <el-option label="参与夺宝" value="1"></el-option>
                <el-option label="商城购物" value="2"></el-option>
                <el-option label="发送红包" value="3"></el-option>
                <el-option label="邀请好友" value="4"></el-option>
                <el-option label="玩小游戏" value="5"></el-option>
                <el-option label="看小视频" value="6"></el-option>
            </el-select>
            <el-select v-model="item.finish_cate" style = "width: 13%;" placeholder="选择完成类型">
                <el-option label="天数" value="0"></el-option>
                <el-option label="次数" value="1"></el-option>
                <el-option label="时长" value="2"></el-option>
                <el-option label="个数" value="3"></el-option>
            </el-select>
            <el-input style = "width: 13%" v-model="item.finish_value" placeholder="请输入"></el-input>
            <p style = "width: 150px;">获得DC的比例:</p>
            <el-input style = "width: 13%" v-model="item.dc_rate" placeholder="请输入"></el-input>&nbsp;&nbsp;%
            <el-button type="danger" @click.prevent="deleteTest(index)">删除</el-button>
        </el-form-item>
    </div>
    
    export default {
        data(){
            return{
                items : [],
            }
        },
        methods: {
            addTest(){
                this.items.push({
                  task_cate: '',
                  finish_cate: '',
                  finish_value: '',
                  dc_rate:''
                })
            },
            deleteTest(index){
                this.items.splice(index, 1)
            },
        },
    }
    
    展开全文
  • Div+CSS如何模拟textarea文本域高度自适应以达到html5标准的contenteditable属性 主要通过为标签添加HTML5中的contenteditable属性达到此效果(contenteditable:规定是否允许用户编辑内容),很棒的是,此属性IE也...

    如何实现

    <div contenteditable="true">可以编辑里面的内容</div>   
    

    Div+CSS如何模拟textarea文本域高度自适应以达到html5标准的contenteditable属性 主要通过为标签添加HTML5中的contenteditable属性达到此效果(contenteditable:规定是否允许用户编辑内容),很棒的是,此属性IE也会支持,所以不用再为兼容问题太去纠结了

    上代码:

         <div
            class="txt-word"
            contenteditable="true"
            placeholder="请输入文字信息"
            ref="divTxt"
            @input="wordNumber('txt')"
         ></div>
           <p class="txt-rest">
             <span
               >{{ txtContent.length ? txtContent.length : 0 }}/{{ wordNum }}</span
             >
           </p>
        </div>
    

    data

    wordNum: 600, // 最多多少字
    txtContent: "", // 文字数量
    

    methods

        // 文字信息
        wordNumber() {
          var txtContentleng = this.$refs.divTxt.innerHTML;
          this.txtContent = this.$refs.divTxt.innerHTML;
          this.wordNum = 600 - txtContentleng.length;
        },
    

    效果
    在这里插入图片描述
    修改样式在下篇噢~~

    展开全文
  • vue添加路由vue-router 近期在学习vue中发现官方文档中如何添加路由写的太模糊了,很难理解,然后各种找资料各种度娘才弄明白,所以这里做个笔记方便自己查询。 第一步安装路由vue-router 这里只考虑npm安装 npm ...
  • 把arr的item渲染到页面,输入内容点击按钮把用户输入的内容添加到页面以及数组 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Title</title> </head&...
  • vue 动态添加组件

    2020-11-04 15:32:59
    vue 利用数组循环动态添加组件 1. 实现效果: 当第一个框输入内容之后,点击添加,动态添加第二个输入框,以此类推; 2. 实现思想: 构建需要动态添加的模板,利用 v-for 循环模板。 通过 index 判断当前模板,绑定...
  • vue点击按钮添加组件,类似于添加购物车效果。 首先在template里 <template> <div class="hello"> <header> <div> <input type="text" v-model="child" /> <button @click=...
  • <div style="height:500px;" class="scrollbar"> <el-scrollbar style="height:100%"> <...--放你需要滚动条的内容--> </el-scrollbar> </div> 下面是样式 ...
  • vue模板内容

    2021-01-27 23:36:24
    Visual Stidop code 添加用户代码 左上角,文件-》首先项-》用户片段 可以新建一个全局代码片段,把下列模板放进去 然后在打开一个新的vue 输入下列“prefix”(前缀) 输入“httpget”或者“httppost” “vue” 就...
  • 源码地址demo演示组件效果如下:当我们滚动列表内容到底部的时候,会自动加载新的内容到列表容器中,而不是一次性请求所有内容。下面我们会通过Vue中的自定义指令来一步步实现该组件。使用组件首先需要通过Vue.use来...
  • div class="title"> <a :href="myurl">{{ title }}</a> <br /> <h3>点击按钮后会弹出消息框,并且返回消息内容</h3> <br /> <h3>v-on:click="addone"</h3>...
  • vue elementui steps组件在步骤条中添加自定义样式内容

    万次阅读 多人点赞 2018-11-27 20:12:49
    由于对于vue了解不够深入,导致今天写这个组件浪费了很多时间。后来一个大神同事给我指点了一下...div style="height: 300px;"&gt; &lt;el-steps direction="vertical" :active="...
  • 功能简介:VUE结合elementUI动态生成form表单文件上传验证input输入框非空校验添加按钮:校验一次只能添加一行删除按钮:若删除的行有内容给予提示,若为空直接删除动态给予按钮提示语:点击添加,请完成未填写的内容,点击...
  • 功能简介:VUE结合elementUI动态生成form表单文件上传验证input输入框非空校验添加按钮:校验一次只能添加一行删除按钮:若删除的行有内容给予提示,若为空直接删除动态给予按钮提示语:点击添加,请完成未填写的内容,点击...
  • vue+element实现form表格动态添加内容

    千次阅读 2020-06-15 10:17:21
    我的需求是在form表格中,动态添加表格的prop和表格的长度 代码如下: <div class="moreRulesIn" v-for="(item, index) in changeForms.obj" :key="index"> <el-form-item class="rules" :label="item....
  • vue实现添加标签组件

    千次阅读 2019-09-24 15:14:57
    最近在写自己个人博客时,发布文章功能需要一个添加标签组件。点击加号,输入文本。就写了一个TagInputer组件,中间遇到了一些麻烦 跟大家分享一下 遇到的问题: input需要根据内容自适应宽度 绑定contenteditable...
  • vue向一个div添加内容,让div的滚动条自动滚动到底部 <div ref="scrollDiv"></div> scrollToBottom() { var div=this.$refs.scrollDiv; div.scrollTop = div.scrollHeight; }
  • vue使用BIMFACE添加标签和多个场景已经动态修改标签内容 太费劲了,直接上代码,一个demo而已,没多少东西。 <template> <div style="height: 90%;"> <button class="button" id="btnAddFireEffect...
  • vue 数组添加元素_前端Vue项目#3

    千次阅读 2020-11-21 19:02:39
    欢迎来到第三章节这次我们来学习一下用v-for标签来遍历数组中内容的方式。 在章节中遇到不会的东西记得去搜哦!首先先把我们项目的骨架搭上<html> <head> <title>Vue little</title> <...
  • VSCode中添加Vue模板

    2021-01-24 17:01:13
    VSCode中添加Vue模板 打开VSCode 文件->首选项->用户片 2.新建全局代码片段文件 Vue.json 3.输入模板的内容 { "Print to console": { "prefix": "vue", "body": [ "<div id='app'>{{message}}<...
  • Vue-全局添加组件

    2018-11-18 14:52:29
    1、首先建一个自定义组件的文件夹,比如叫loading,里面有一个index.js,还有一个自定义组件loading.vue,在这个loading.vue里面就是这个组件的具体的内容,比如: &lt;template&gt; &lt;div&gt; ...
  • 本文实例为大家分享了vue实现列表的添加点击,供大家参考,具体内容如下 使用指令:v-on v-for v-on v-bind v-model html <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> &...
  • 最初,只是测试的纯文字,在开发完毕自测的时候,顺手添加了几张图片,这才发现,图片溢出;最初的代码如下: <div class="dialog-content" v-html="dialogContent"></div> 对应的css代码如下: <...
  • 但是添加后input框中内容消失我把给span动态赋值的语句删除之后,input内容不会消失相关代码// 请把代码文本粘贴到下方(请勿用图片代替代码)模板中的代码:<div><inputtype="text"placeholder="真实姓名...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 392
精华内容 156
关键字:

vue添加div内容

vue 订阅