精华内容
下载资源
问答
  • vue页面不显示效果

    千次阅读 2019-09-10 11:08:34
    最近在写vue,所以有点...1、vue绑定页面但是不显示样式 vue绑定的div里面设置字体时不要用<text>标签,否则绑定的div里面的样式全部显示不出来     暂时就这样,如果还有坑我之后在更新加粗样式 ...

    最近在写vue,所以有点小坑给列出来

    1、vue绑定页面但是不显示样式

    vue绑定的div里面设置字体时不要用<text>标签,否则绑定的div里面的样式全部显示不出来
     
     
    暂时就这样,如果还有坑我之后在更新

    展开全文
  • vue 设置 input 为可以编辑

    千次阅读 2019-04-18 13:37:00
    我用最笨的方法,先实现功能先,用两个input,一个可以编辑,一个可以编辑,失去焦点后隐藏可以点击的那个,点“编辑”时,显示可以编辑的那个input <div class="edit-item"> <input type="text" id=...

    我用最笨的方法,先实现功能先,用两个input,一个可以编辑,一个不可以编辑,失去焦点后隐藏可以点击的那个,点“编辑”时,显示可以编辑的那个input

              <div class="edit-item">
                <input type="text" id="group-name" v-model="groupName" class="edit-input" disabled v-show="!isEditGroupName" >
                <input type="text" id="group-name2" v-model="groupName" class="edit-input" ref="groupName"
                @input="changeValue"
                @change="editGroupNameSave(groupInfo.name)" v-show="isEditGroupName" @blur="isEditGroupName = false">
                <span  @click="editGroupName"><icon-svg name="icon-kaka-compile" icon-style="edit-ico"></icon-svg></span>
              </div>
    
      export default {
        name: 'RightSideBar',
        props: {
        },
        data () {
          return {
            isEditGroupName: false, // 修改群名称
          }
        },
        computed: {
          // 群名称
          groupName: {
            get () {
              return this.$store.getters.groupSetInfo.name
            },
            set (val) {
              // 使用vuex中的mutations中定义好的方法来改变
              let groupSetInfo = this.$store.getters.groupSetInfo
              let copyMyinfo = Object.assign({}, groupSetInfo)
              copyMyinfo.name = val
              this.$store.dispatch('groupSetInfo', copyMyinfo)
            }
          },
        },
        methods: {
          changeValue () {
            let leng = this.validateTextLength(this.groupName)
            if (leng >= 15) {
              this.$refs.groupName.maxLength = leng
            } else {
              this.$refs.groupName.maxLength = 30
            }
          },
          validateTextLength (value) {
            // 中文、中文标点、全角字符按1长度,英文、英文符号、数字按0.5长度计算
            let cnReg = /([\u4e00-\u9fa5]|[\u3000-\u303F]|[\uFF00-\uFF60])/g
            let mat = value.match(cnReg)
            let length
            if (mat) {
              length = (mat.length + (value.length - mat.length) * 0.5)
              return length
            } else {
              return value.length * 0.5
            }
          },
          // 打开编辑
          editGroupName () {
            this.isEditGroupName = true
            let nickNameInput = document.querySelector('#group-name2')
            setTimeout(() => {
              nickNameInput.focus()
            }, 0)
          },
          // 保存群名修改
          editGroupNameSave (data) {
    
          },
    
        },
        created () {
      }
    

    1412138-20190418133611374-611365337.png

    编辑
    1412138-20190418133633734-1049097234.png

    转载于:https://www.cnblogs.com/ybixian/p/10729096.html

    展开全文
  • 我用最笨的方法,先实现功能先,用两个input,一个可以编辑,一个可以编辑,失去焦点后隐藏可以点击的那个,点“编辑”时,显示可以编辑的那个input <div class=edit-item> <input type=text id=group-name v-...
  • vue项目中tab切换展示不同的echarts图表,切换后图表不显示,为空白,解决方案,为每个echarts id的div设置宽高即可

    vue项目中tab切换展示不同的echarts图表,切换后图表不显示,为空白,解决方案,为每个echarts id的div设置宽高即可

    展开全文
  • Vue项目 动态设置元素的背景图 方式 <template> <div class="note" :style ="note"></div> </template> <script> export default { data() { return { note: { ...

    Vue项目 动态设置元素的背景图 方式

    <template>
    	 <div class="note"  :style ="note"></div>
    </template>
    <script>
    export default {
        data() {
            return {
                note: {
                backgroundImage: "url(" + require("../../assets/save.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "25px auto",
                marginTop: "5px",
              },
         }
     },
     </script>
    
    展开全文
  • 1.绑定内联样式设置背景图片为什么会不显示?同一个DIV,在CSS里通过ID设置背景图片就能显示2.:style="{backgroundImage:'url('+'./assets/logo.png'+')',backgroundSize:'cover',backgroundPosition:'centercenter'...
  • # Vue设置背景图片

    2020-07-22 21:16:04
    Vue设置背景图片 使用Css的方式引入有问题,不显示图片,使用下面的方法 <template> <div class="login-wrap"> <img :src="imgUrl" width="100%" height="758"> </div> </template...
  • //选择数据单选设置 setRow:function (record) { let that = this; return { on: { click: () => { } } } }, onSelectChange:function (selectedRowKeys, selectedRows) { }, onSelectRow:...
  • 在app.vue 里面已经设置了 ``` <div id="app"> </div> import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'; import 'moment/locale/zh-cn'; moment.locale('zh-cn') data() { ...
  • 之前设置多个div横排显示都会使用float:left,这样使div脱离了文档流,容易控制,不管是设置margin-left还是position,left都不会有效果。 后来我尝试了使用display:inline-block,这样就可以使用marginLeft来控制...
  • Vue中用v-show显示某个组件时,用scrollTop = scrollHeight的方法企图滚动到div底部,可是第一次显示不能滚动,第二次就可以。解决方法: // 在执行v-show=true之后执行滚动底部操作时,设置一个延迟,达到异步等待...
  • 今天突然想改一下自己写的项目中登录页面的样式,于是行动,在加入记住我按钮后,发现input输入框没有居中显示,于是把input 和其他的一些标签整合到一个div层中,但是整个div的样式要居中显示,于是乎找到一些修改...
  • vue设置全屏背景

    万次阅读 2020-05-22 17:21:51
    Vue项目开发中,有时候我们要向页面中添加一些背景图片,可是当我们在样式中添加了背景图片,编译打包后,配置到服务器上时,由于路径解析的问题,图片并能够正确的显示出来,列如下面的CSS样式就会出现报错: ...
  • <div class="exam-cates"> <!--Regular if14--> <div class="ec-child"> <a class="ec-child-main"> <img src="./img/icons/cate-icon-0.png" alt=...
  • 使用v-show的时候,被隐藏的属性还在页面上,只不过css中的属性被设置为了 display:none,当页面需要频繁切换的时候可以使用v-show <template> <div class="hello"> <div> <label v-show=...
  • 以下是register.vue文件 <code class="language-html"><template> <div id="register"> <div id="registerBox"> <p id="registerText">注册页面&...
  • 最近在项目中遇到了这种情况,需要在tab控件上渲染多个echart图标,然后切换查看时,...原理:利用v-if属性,当切换至对应的tab时,设置其v-if的值为true即可,同时设置默认显示的tab 举例如下: <el-tab-pane na
  • 在ios端img标签的图片不显示,安卓可正常显示 解决方案: 不可以为img设置任何css样式,只可以在为img的父盒子设置样式,img的大小靠百分比设置。 代码示例: 错误示例 <div class="img"> <img src="xxx....
  • vue官方说明中允许一个祖先组件通过设置provide/inject向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。provide/inject 是解决组件之间的通信问题的利器,受层级结构的...
  • 可是不显示,是不支持吗 <p>cdn 引入方式是可以用的 <pre><code> "valine": "^1.1.9", <template> <div> <div class="" id="vcomments"></...
  • 第一步,创建一个静态页面并引入vue.js文件,并在主体元素标签中插入一个div设置id属性,如下图所示: 第二步,在[removed][removed]标签中调用Vue.extend(),设置template和data,如下图所示: 第三步,使用new...
  • 给id为d2的div设置高度后两边的div会下沉,不设置就正常显示 ``` <!DOCTYPE html> <script src="https://cdn.jsdelivr.net/npm/vue"> *{ padding:0px; margin:0px; box-sizing:border-box; } .base...
  • 原因:在页面进行加载时,隐藏的图表找到对应的div大小,所以默认给了一个大小。所以要做的就是在页面加载时,就对图表进行初始化 原理:利用v-if属性,当切换至对应的tab时,设置其v-if的值为true即可,同时设置...
  • VUE打印

    2019-12-06 12:09:31
    Vue打印 vue版本 ...在chrome中无法横向打印,打印页面中的「横纵向布局」选项不显示 解决 在页面中写入按键,设置按键事件。 在设置事件中,写入 print("div名称") 此时可以打印该div的页面 ...
  • 首先要安装好echarts npm install echarts --save...要注意的是,该节点必须设置好宽高,否则即使正常引入也会不显示 <div id='main' style="width: 600px;height:400px;"></div> 在组件中初始化echa.
  • 1、如何实现横屏功能微信端:由于微信端默认开启横屏模式,且在安卓手机上,就算开启了手机自带的屏幕旋转,微信也需要手动开启横屏模式才可以让微信横屏显示。而且大多数用户都不会开启,因为太方便了,所以要...
  • 将需要移动的距离均分,设置定时器每隔一段时间移动一点,直到 移动至目标距离为止,下面直接上代码 // html <div class="scrollView" ref="idSwiperImg"> <div class="chooseImgItem" @click="tabClick...
  • 从浏览器的显示看,在5颗星星显示的位置有变化,但是高度为0显示不出来。设置的高度和宽度也起作用,改变高度也没有效果。![图片说明](https://img-ask.csdn.net/upload/201805/24/1527124822_865353.jpg) 下面是...
  • Vue中控制显示还是隐藏是通过v-if和v-show,但是我们设置的data它是掌管全局的,只能全部显示和全部隐藏,能个别显示和个别隐藏,那么我们就需要给我们的数组中的对象添加一个默认属性show,来控制这条数据的显示...

空空如也

空空如也

1 2 3 4 5 ... 8
收藏数 157
精华内容 62
关键字:

vue设置div不显示

vue 订阅