精华内容
下载资源
问答
  • 需要把富文本内容展示在vue页面中,当时的想法是用一个第三方富文本编辑器进行展示,后来发现是否可以通过一个div把内容展示出来,经过测试可以通过v-html=变量或方法对div直接赋值 示例 parentContent为变量 ...

    前言

    近期在项目中遇到一个比较常见的需求,需要把富文本内容展示在vue页面中,当时的想法是用一个第三方富文本编辑器进行展示,后来发现是否可以通过一个div把内容展示出来,经过测试可以通过v-html=变量或方法对div直接赋值

     示例

    parentContent为变量

     data() {
        return {
          form: this.$store.state.newsitem,
          parentContent: this.$store.state.newsitem.content,
        };
      },

    div中使用v-html 

     <el-form-item label="Content">
          <el-card title="新闻内容">
            <div id="DivContent" v-html="parentContent"></div>
          </el-card>
        </el-form-item>

    完整代码

    <template>
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="Id">
          <el-input v-model="form.id"></el-input>
        </el-form-item>
        <el-form-item label="Title">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="Content">
          <el-card title="新闻内容">
            <div id="DivContent" v-html="parentContent"></div>
          </el-card>
        </el-form-item>
        <el-form-item label="Content">
          <Editor v-bind:content="parentContent" @childemit="parentEvent"></Editor>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">Create</el-button>
          <el-button type="primary" @click="onCancel">Cancel</el-button>
        </el-form-item>
      </el-form>
    </template>
    
    <script>
    import Editor from "@/components/VueEditor";
    export default {
      components: {
        Editor,
      },
      created() {
    
      },
      data() {
        return {
          form: this.$store.state.newsitem,
          parentContent: this.$store.state.newsitem.content,
        };
      },
      methods: {
        parentEvent(data) {
          this.parentContent = data;
        },
        onSubmit() {
          let form = this.form;
    
          const restweburl = "http://localhost:5000/";
          const requestOptions = JSON.stringify({
            id: form.id,
            title: form.title,
            publishDate: "2020-10-10",
            pageUrl: form.pageUrl,
            content: this.parentContent,
            author: null,
          });
          console.log(requestOptions);
    
          /*
          this.$axios
            .post(restweburl + "api/Article/UpdateNews", requestOptions)
            .then(function (res) {
              console.log(res);
            })
            .catch(function (err) {
              console.log(err);
            });
          console.log("submit!");*/
        },
        onCancel() {
          this.$router.push({ path: "/" });
        },
      },
    };
    </script>
    
    <style>
    </style>

     

    展开全文
  • Vue中实现div编辑效果,思路清晰,简单易懂。 思路: 通过绑定三个事件,其中@input事件是每一次输入时都会有响应的,所以我使用了一个内部变量editText来存储;当得到焦点时,将外部的值赋值到内部变量;而在失去...
  • vue赋值与点击

    千次阅读 2019-10-28 14:30:41
    我使用的工具为H-builder x 在创建的html文件中引入 保持网络,不要断网 <!DOCTYPE html> <html> <head> <meta charset="utf-8">...script src="https://cdn.bootcss.com/vue/...

    我使用的工具为H-builder x
    在创建的html文件中引入

    保持网络,不要断网

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    	</head>
    	<body>
    		<div id="d1">
    		<div>{{ll}},{{qq}}</div>
    		<input type="button" v-on:click="doClick" value="点我"/>
    		<input type="text" v-model="count"/>
    		<input type="button" v-on:click="pressPlass" value="+"/>
    		</div>
    	</body>
    	<script>
    		var vem=new Vue({
    			el:'#d1',
    			data:function(){
    				return{
    					ll:'HELLOWORLD',
    					qq:'HAHAHAH',
    					count:100
    				}
    			},
    			methods:{
    				doClick:function(){
    					console.log('点击测试')
    				},
    				pressPlass:function(){
    					this.count++;
    					console.log("count=%s",this.count)
    				}
    			},
    			
    		});
    	</script>
    </html>
    
    展开全文
  • Vue】使用Vue实现div收缩效果

    千次阅读 2019-09-10 10:46:38
    本文原文地址:Microanswer的博客【Vue】使用Vue实现div收缩效果。 一、效果展示 你看到的边框只是为了演示效果需要,实际组件是不会有任何内容的,它只提供收缩功能。此处内容可以是任何内容,组件会自动根据内容...

    重要声明:本文章仅仅代表了作者个人对此观点的理解和表述。读者请查阅时持自己的意见进行讨论。

    本文原文地址:Microanswer的博客【Vue】使用Vue实现div收缩效果

    一、效果展示

    你看到的边框只是为了演示效果需要,实际组件是不会有任何内容的,它只提供收缩功能。此处内容可以是任何内容,组件会自动根据内容高度进行展开,需要用户关心的是否开还是关的状态。开发者也只需关心此状态,故此可以放心的使用本控件,实现页面上部分内容的收缩展示。

    图1

    二、实现要点

    基于css的transition功能实现。通过设置不同的视图高度,再配合一个 transition 过渡动画时长的设定,就可以实现这个功能了。不过很有趣,transition并不支持对height(高度)的变化产生预期的开合效果,但支持对 maxHeight 的变化产生开合效果。因此,咱们设置视图的高度,是通过设置 maxHeight 来实现的。

    三、代码实现

    1、创建文件

    不妨咱们将此组件命名为:ShrinkView 吧。创建新的vue单文件:ShrinkView.vue。此控件需提供一个插槽供使用者放入自己的内容。其初始代码如下:

    <template>
        <div>
            <slot></slot>
        </div>
    </template>
    <style scoped>
    </style>
    
    <script>
        export default {
            props: {
            },
            updated () {
            },
            mounted () {
            },
            methods: {
            },
            watch: {
            },
            data () {
                return {
                }
            }
        }
    </script>
    

    2、逻辑实现

    由于通过 maxHeight 限定视图高度,当内容多于maxHeight 时必然会超出显示,咱们首先添加超出范围进行隐藏的css样式,以及动画开合过渡时间样式:

    <template>
        <div class="shrink-view">
            <slot></slot>
        </div>
    </template>
    <style scoped>
        .shrink-view {
            overflow: hidden;
    
            -webkit-transition-duration: 300ms;
            -moz-transition-duration: 300ms;
            -ms-transition-duration: 300ms;
            -o-transition-duration: 300ms;
            transition-duration: 300ms;
        }
    <style>
    
    <scr....ipt/>
    

    现在,基本样式定义完成,进行下一步设置不同视图高度操作,此步操作可能涉及逻辑思考了。展开,当希望展开时,一定是希望展开到视图内容完整的高度,而此高度的获取,可通过 dom 的 scrollHeight 获取到,在组件挂载到界面、组件内容更新后,都有必要拿到这个高度值进行保存。因此,在 mounted 和 updated 方法里获取该值是最合适不过的地方:

    <temp....late/>
    <script>
        export default {
            props: {
            },
            updated () {
                this.init();
            },
            mounted () {
                this.init();
            },
            methods: {
                // 因为 updated 和 mounted 里都要使用本方法,所以将本方法提取为一个方法方便调用。使用 nextTick 进一步保证视图高度获取精确。
                init () {
                    this.$nextTick(() => {
                        this.contentHeight = this.$el.scrollHeight;
                    });
                }
            },
            watch: {
            },
            data () {
                return {
                    contentHeight: 0, // 使用此字段保存视图内容的实际高度
                }
            }
        }
    <script>
    
    <style scoped>...</style>
    

    代码中使用 contentHeight 字段保存了视图内容的实际高度,现在只需要再设定一个字段来保存开合状态即可,不妨使用 mIsOpen 字段来维护这个状态:

    <script>
        export default {
            props: {
                value: Boolean // 定义属性 value,这样v-model的值就可以接收到。
            },
            updated () {
                this.init();
            },
            mounted () {
                this.init();
            },
            methods: {
                // 因为 updated 和 mounted 里都要使用本方法,所以将本方法提取为一个方法方便调用。使用 nextTick 进一步保证视图高度获取精确。
                init () {
                    this.$nextTick(() => {
                        this.contentHeight = this.$el.scrollHeight;
                    });
                }
            },
            watch: {
                // 监听 value 的变化,并将变化值赋值给 本组件维护的 mIsOpen 字段中
                value (newValue) {
                    this.mIsOpen = newValue;
                },
    
                // 监听 mIsOpen 的变化,一旦变化,将input事件暴露,这样可实现v-model双向绑定。
                mIsOpen (newValue) {
                    this.$emit('input', newValue);
                }
            },
            data () {
                return {
                    contentHeight: 0, // 使用此字段保存视图内容的实际高度
                    mIsOpen:       this.value  // 保存开合状态,默认值使用prop定义的属性(即v-model的值)
                }
            }
        }
    <script>
    

    代码中定义了一个data的字段 mIsOpen 和 prop的属性字段 value,前者保存当前组件的开合状态,后者连接了使用者传入的开合状态,并监听属性value,将改变的值赋值给dada的mIsOpen字段,实现组件内的状态变更。同时组件内状态变化后暴露事件input,从而实现双向绑定。

    最后,只需要将mIsOpen的不同状态反应到template内,进行视图响应,那么整体任务就算完成:

    <template>
        <div class="shrink-view" :style="{maxHeight: (mIsOpen?contentHeight:0) + 'px'}">
            <slot></slot>
        </div>
    </template>
    <script>...</script>
    
    <style>...</style>
    

    实现也非常简单,只需要根据 mIsOpen 不同的状态,为 maxHeight 赋值不同的高度,即可实现。

    现在完整的代码如下:

    <!-- ShrinkView.vue -->
    <template>
        <div class="shrink-view" :style="{maxHeight: (mIsOpen?contentHeight:0) + 'px'}">
            <slot></slot>
        </div>
    </template>
    
    <script>
        export default {
            props: {
                value: Boolean
            },
            updated () {
                this.init();
            },
            mounted () {
                this.init();
            },
            methods: {
                init () {
                    this.$nextTick(() => {
                        this.contentHeight = this.$el.scrollHeight;
                    });
                }
            },
            watch: {
                value (newValue) {
                    this.mIsOpen = newValue;
                },
                mIsOpen (newValue) {
                    this.$emit('input', newValue);
                }
            },
            data () {
                return {
                    contentHeight: 0,
                    mIsOpen: this.value,
                }
            }
        }
    </script>
    
    <style scoped>
        .shrink-view {
            -webkit-transition-duration: 300ms;
            -moz-transition-duration: 300ms;
            -ms-transition-duration: 300ms;
            -o-transition-duration: 300ms;
            transition-duration: 300ms;
    
            overflow: hidden;
        }
    </style>
    

    四、使用

    现在可以在其他界面上使用这个组件了。下面我在一个最简单的界面使用了这个组件:

    <template>
        <div>
            <h1>Vue实现收缩效果</h1>
    
            <input type="checkbox" v-model="open">
    
            <div style="border: 1px solid gray">
                <shrink-view v-model="open">
    
                        你看到的边框只是为了演示效果需要,实际组件是不会有任何内容的,它只提供收缩功能。
                    <hr>
                        此处内容可以是任何内容,组件会自动根据内容高度进行展开,需要用户关系的只需暴露是否开还是关的状态。
                        开发者也只需关系此状态,故此可以放心的使用本控件实现页面上部分内容的收缩展示。
    
                </shrink-view>
            </div>
    
        </div>
    </template>
    
    <script>
        import ShrinkView from '../components/ShrinkView';
    
        export default {
            components: {
                ShrinkView
            },
            data () {
                return {
                    open: false
                }
            }
        }
    </script>
    

    五、不是VUE怎么办?

    放心,如果你不是使用的vue,但你通过阅读本文,你便会知道其实现原理,通过 transition 对 maxHeight 支持从而实现 高度 或 宽度的变化动效,不要忘了添加 overflow: hidden 样式,以免内容超出达不到效果。

    展开全文
  • div id="industrySectorScroll" :style="{ height: screenHeight + 'px' }"></div> js: export default { name: "industrySectorScroll", data() { return { screenWeight: 0, // 屏幕宽度 ...

    html:

    <div id="industrySectorScroll" :style="{ height: screenHeight + 'px' }"></div>

    js:

      export default {
        name: "industrySectorScroll",
    
        data() {
          return {
            screenWeight: 0, // 屏幕宽度
            screenHeight: 0, // 屏幕高度
       
          };
        },
        mounted() {
          this.screenWeight = document.documentElement.clientWidth;
          this.screenHeight = document.documentElement.clientHeight;
    }

     

    展开全文
  • vue_props div赋值props定义变量 templete获取 <div id="app"> <add v-bind:btn="h"></add> </div> <script> var vm = new Vue({ ...
  • 这里用到了js的三个鼠标事件,分别是onmousedown(鼠标按下)、onmousemove(鼠标移动)以及onmouseup(鼠标松开),大致流程就是鼠标按下拖动图标进行拖动时,动态获取当前div的left和top再重新赋值给当前div的top、...
  • vue中,获取一个div的高赋值给另一个div (自适应) 问题描述: 左侧是video 为了让video不出现黑边 video是16:9的(怎么写成16:9的盒子 下次说), 左侧的高度会随着页面宽度的变化而变化。起初是让左右等高用的...
  • Vue 动态赋值 class

    千次阅读 2018-09-14 08:48:36
    Vue 动态赋值 class Vue 在操作 DOM 元素的 class 属性时,有以下多种方法 更多精彩 更多技术博客,请移步 asing1elife’s blog 比较通用的是否赋值方式 通过以下 :class="{show: show}" 的...
  • vue scrollTop赋值无效

    2020-09-16 11:12:41
    js ``` this.$nextTick(() => { const container = this.$refs.mescroll container.scrollTop = container.scrollHeight console.log(container.scrollHeight...把高赋值给top后答应top还是为0,请问是啥问题?
  • 一开始我想到的解决方式时,获取到屏幕的高度,并将它赋值为中间的div之中,这就能完美解决footer下移的问题了,说干就干。当时写出的代码是这样的: mounted(){ console.log('进行了高度赋值'); console.log($...
  • Vue赋值 vue有4种赋值方式 1.文本的方式 2.HTML的方式 3.属性的方式 4.表达式 <!--在样式中加 <style> .class1{ font-size: 12px; color: darkgreen } </style> --> &...
  • vue.js input框之间赋值方法2019-01-07编程之家https://www.jb51.cc编程之家收集整理的这篇文章主要介绍了vue.js input框之间赋值方法,编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。如下所示:...
  • vue中data数据之间如何赋值

    万次阅读 2019-09-12 13:39:07
    vue中data数据之间如何赋值前言实现方式 前言 最近我妹突然问我vue的data之间需要进行赋值,这是什么奇葩需求,干嘛不直接自己定义好就好了啊,既然有这种场景,那么我们就需要去解决这种场景。 实现方式 <...
  • div v-for="item in filterList" :key="item.attributeCode"> <a-form-item v-if="item.dictInterfaceQueryTypeId == '1'"> <template slot="label">{{item.attributeName}}<
  • vue 数据赋值了 但是视图没有更新

    千次阅读 2020-07-20 16:05:00
    div> <div> <span>用户名: {{ userInfo.name }}</span> <span>用户性别: {{ userInfo.sex }}</span> <span v-if="userInfo.officialAccount"> 公众号: {{ userInfo....
  • 如下所示: v-for=“kf in kefu” function copy_fun(copy){ //参数copy是要复制的文本内容 上面的方法就可用了,亲测可用! 补充知识:VUE 给类似a标签加点击事件...<div id=app click=end> <input type=button
  • 先实例化Vue对象,再操作其他对象,...下面是简要的例子,还望高手指点,目前猜测是对象赋值后,vue渲染元素将元素进行了改变导致之前的赋值对象变化了,无论是jquery对象还是dom对象都不行。 <div id="vm"&g...
  • vue scrollTop 无法赋值

    千次阅读 2018-12-21 01:46:22
    遇到问题 container.scrollTop 一直为0不能赋值 watch: { historyList () { this.$nextTick(() => { const container = this.$el.querySelector('.scrolldivmain') ...
  • Vue.js一个前端框架,渐进式的,侵入性高,你一旦用了它就只能按照它的方式写(从头到尾)。 Mvvm模式 mvvm通过数据双向绑定让数据自动地双向同步 ...Vue的基本赋值 <!DOCTYPE html> <html&g...
  • vue 多个div拖拽

    2020-04-21 20:22:01
    // } }) let app = new Vue({ el:"#app", data:{ //通过data可以达到数据互通 isDrag:false, //第一个div isDrag2:false //第二个div的参数 }, // methods:{ //方法1的 // clic:function(){ // butt = !butt // } /...
  • vue中给控件属性赋值

    千次阅读 2019-08-05 15:42:32
    本例将遍历元素的id赋值到控件的id属性中 <div class="fun-item border-bottom" @click='siwtchBtn' :id="item.id" v-if="item.message_type==2" v-for="(item,index) in vipType"> <div...
  • Vue 为图片赋值动态地址

    千次阅读 2018-10-18 11:41:27
    Vue 的 的 src 属性在赋值时,如果是静态内容可以直接指定,但动态内容则不行 更多精彩 更多技术博客,请移步 asing1elife’s blog 静态指定的方式 一般静态指定时,会将图片放在相同路径下,然后通过...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 22,777
精华内容 9,110
关键字:

vue赋值div

vue 订阅