精华内容
下载资源
问答
  • vue中span标签的坑
    千次阅读
    2021-04-22 13:12:15

    最近做了一个移动端的项目, 在开发过程中,实现一个div或者p标签里面的两个不同字号的底部端齐平。
    1. 查看了网上的一些span标签的处理,如定位、弹性布局等,但是都没有实现效果,最后在一个无意间发现了一种写法,
    具体的看代码吧:
    这是一个布局html:

    	                          <span class="sp_one">¥</span>{{item.StockInDetailPrice}}
    	                     
    	            </p>
    	           css:
    	           .item_top_center_money{
           
    
    			                font-size: .28rem;
    			                 font-family: PingFang-SC-Medium;
    			                font-weight: bold;
    			                color: #333333;
    			               line-height: .33rem;
           
    				            .sp_one{
    				                 font-size: .20rem;
    				    
    				            }
           这样就可以实现了,在盒子上先写上一个font-size 等属性,接着改另一个就可以。 如果要是分开写,则实现不了底部齐平的效果
    

    2. 还有一个坑,就是 两个标签之前会有间隙,单独解决这一个办法,有很多种,
    (1) 可以使用display:flex;
    (2) 可以在两个元素的父元素上写上font-size: 0
    (3 ) 可以用float:left 这个应该也可以。
    这就是最近做项目碰到的一个坑,搞了好半天,我的天啊, 这UI的脑子都是怎么想的呢,为什么要底部齐平呢。
    最后,就是,好好敲代码吧,毕竟生活不易! 哈哈哈

    更多相关内容
  • 2:在元素,通过属性绑定的形式,将样式对象应用到元素 这是一个H1 3.在:style通过数组,引用多个data上的样式对象 1:在data上定义样式 data:{ styleObj1:{color:'blue','font-weight':200,'font-
  • Vue中span标签的背景图是根据后台返回的数据动态显示的图片,如下图的的红圈是根据后台返回的数据动态显示的图片,对应的HTML是.icon元素实现元素的背景图的动态显示的具体操作如下1)根据后台返回的数据,在该...

    在Vue中span标签的背景图是根据后台返回的数据动态显示的图片,如下图中的的红圈是根据后台返回的数据动态显示的图片,对应的HTML是.icon元素


    实现元素的背景图的动态显示的具体操作如下

    1)根据后台返回的数据,在该组件的.vue文件中的<script>中的输出对象中使用生命周期钩子created(),在里面定义mapClass数组对象,里面元素的值一一对应后台返回的数据,例如后台返回的数据如下所示:

    {
      "seller": {
        "name": "粥品香坊(回龙观)",
        "description": "蜂鸟专送",
        "deliveryTime": 38,
        "score": 4.2,
        "serviceScore": 4.1,
        "foodScore": 4.3,
        "rankRate": 69.2,
        "minPrice": 20,
        "deliveryPrice": 4,
        "ratingCount": 24,
        "sellCount": 90,
        "bulletin": "粥品香坊其烹饪粥料的秘方源于中国千年古法,在融和现代制作工艺,由世界烹饪大师屈浩先生领衔研发。坚守纯天然、0添加的良心品质深得消费者青睐,发展至今成为粥类的引领品牌。是2008年奥运会和2013年园博会指定餐饮服务商。",
        "supports": [
          {
            "type": 0,
            "description": "在线支付满28减5"
          },
          {
            "type": 1,
            "description": "VC无限橙果汁全场8折"
          },
          {
            "type": 2,
            "description": "单人精彩套餐"
          },
          {
            "type": 3,
            "description": "该商家支持发票,请下单写好发票抬头"
          },
          {
            "type": 4,
            "description": "已加入“外卖保”计划,食品安全保障"
          }
        ]
      }
    }
    

    .icon元素中的背景图对应数据中的supports对象中的type的类型,type---0,1,2,3,4一一对应decrease,discount,special,invoice,guarantee,也就是要显示的图片的名字,其中图片素材如下所示,这就是要在.icon中显示的背景的图片


    classMap的定义如下所示:

    <script>
        export default {
            //子组件属性seller的声明
            props:{  //子组件通过props属性,获取父组件传递过来的数据
                seller:{
                  type:Object
                }
            },
            //在这个组件created的时候自定义一个classMap属性
            created(){
              this.classMap = ['decrease','discount','special','invoice','guarantee'];
            }
        }
    </script>
    

    2)在组件的html标签中引用自定义属性classMap,如下所示:

    <div class="support" v-if="seller.supports">
        <span class="icon" :class="classMap[seller.supports[0].type]"></span>
        <span class="text">{{seller.supports[0].description}}</span>
    </div>

    seller.supports[0].type是后台返回的数据,对照1)中后台返回的supports数组中的第一个元素的type:0,classMap[0]对应的是decrease

    3)在组件的<style>标签中给.icon元素定义不同背景

      .icon
        display: inline-block
        width:12px
        height:12px
        margin-right :4px
        background-size:12px 12px
        background-repeat :no-repeat
        &.decrease
          bg-image('decrease_1')
        &.discount
          bg-image('discount_1')
        &.guarantee
          bg-image('guarantee_1')
        &.invoice
          bg-image('invoice_1')
        &.special
          bg-special('special_1')
    

    其中bg-image()方法是用stylus的mixin特性封装的一个方法,作用是根据不同的设备像素比引用不同的图片,其在mixin.styl文件中的定义如下:根据不同的设备像素比来设置background-image的url,$url是传进来的图片名,然后跟后面的字符串拼接成完整的图片名

    bg-image($url)
      background-image :url($url+'@2x.png')
      @media (-webkit-min-device-pixel-ratio:3),(device-pixel-ratio:3)
        background-image :url($url+'@3x.png')

    通过以上的设置,就可以根据后台返回的数据,动态的显示icon元素的背景图了



















    展开全文
  • vue中动态控制标签属性

    千次阅读 2020-09-29 10:28:03
    --动态控制属性: v-bind:属性='变量' --> <img v-bind:src="src" alt="" v-on:mouseenter="change()"> <div v-bind:class="msg" v-on:mouseenter="c()" v-on:mouseleave="l()"></div> <...
     <body>
       <div id="app">
            <!--动态控制属性: v-bind:属性='变量' -->
        <img v-bind:src="src" alt="" v-on:mouseenter="change()">
        <div v-bind:class="msg" v-on:mouseenter="c()" v-on:mouseleave="l()"></div>      
       </div>
       <script src="js/vue.js"></script>
        <script>
                new Vue({
                    el:'#app',
                    data:{
                        src:'https://h2a.appsimg.com/a.appsimg.com/upload/flow/2020/07/09/96/15942612596698.jpg!85.webp',
                        src1:'https://h2a.appsimg.com/a.appsimg.com/upload/flow/2020/08/11/163/15971289413139.jpg!85.webp',
                        msg:'current'
                    },
                    methods:{
                        change(){
                            this.src=this.src1;
                        },
                        c(){
                            this.msg=''
                        },
                        l(){
                            this.msg='current'
                        }
                    }
                })
        </script>
     </body>
    

    v-bind值的不同书写

    <body>
       <!-- 
         如果属性是变量
           值只有一个变量 :属性='变量'
           多个变量 :属性='[变量,变量]'
           属性的值有的可以确定,有的不确定
             :属性='{k:v,k:v}'k代表的是属性值 v是true,代表该属性值存在。v是false 代表属性值不存在。v可以是变量,也可以是表达式
             -->
            <div id="app">
                <!-- v-bind:属性 简写为 :属性 -->
                <!-- <p :class="[a,b]">dsfsdfds</p> -->
                <p :class="{one:show,two:1==2}">111</p>
            </div>
    
            <script src="js/vue.js"></script>
            <script>
                new Vue({
                    el:'#app',
                    data:{
                        a:'one',
                        b:'two',
                        show:true
                    }
                })
            </script>
     </body>
    
    展开全文
  • vue中标签自定义属性的使用

    千次阅读 2020-11-30 13:47:53
    vue中,尽量避免对dom的操作,通过对状态的管理实现需要的功能 举个例子:vue获取dom元素可以使用ref要想获得自定义属性,可以通过设置ref实现 <span data-num="21" ref="dataNum" @click="getData">55<...

    在 vue 中,尽量避免对dom的操作,通过对状态的管理实现需要的功能
    举个例子:
    vue获取dom元素可以使用 ref 要想获得自定义属性,可以通过设置 ref 实现

    <span data-num="21" ref="dataNum"  @click="getData">55</span>
    
    getData:function () {
       console.log(this.$refs.dataNum.dataset.num);
    }
    

    但是vue 不推荐这样做,你可以这样做

    <span  @click="getData('21')">55</span>
    
    getData:function (num) {
       console.log(num);
    }
    

    像这样的(关于input中的属性),一般可以放到name空间里,可以通过$attr属性获取相应的值

    <input ref="dataNum" name="21" :value="value1"></input>
    <span @click="getData">获取name</span>
    
    getData:function () {
       console.log(this.$refs.dataNum.$attr.name);
    }
    

    但是这样为何不直接传进去状态值呢

    <input v-modle="value1"></input>
    <span @click="getData('21')">获取name</span>
    
    getData:function (num) {
       console.log(num);
    }
    

    当然操作dom还可以通过e.target操作获取,还是不推荐

    <span data-num="21" @click="getData">55</span>
    
    getData:function (e) {
       console.log(e.target.getAttribute('data-num'));
    }

    转载地址:https://blog.csdn.net/weixin_42204698/article/details/100043252

    展开全文
  • vue中标签属性绑定值渲染问题

    千次阅读 2021-01-11 16:24:15
    在项目遇到一个棘手的问题,给span标签添加title,title显示的内容就是该span标签显示的内容,且返回的内容有html标签,需要解析出来(考虑vue的slot插槽未能实现) 最终解决办法:在绑定的title使用过滤器,...
  • vue中ref属性

    2022-02-08 21:04:21
    获取原生js的的dom元素(标签元素)或者vue中的组件元素。 与原生js属性用法比较: 1)该属性对应原生javascript的id和class属性 //通过class或id查找元素 doucument.getElementByClass("school") document....
  • vue获取自定义属性的值,标签的值

    千次阅读 2020-10-23 11:32:15
    vue中尽量减少dom操作。 方式一:不推荐使用 自定义属性为data-val,通过e.target.getAttribute()获取。 <span data-val="0" @click="getVal0">点我</span> getVal0(e){ console.log(e....
  • vue ref属性(标签属性)

    千次阅读 2021-07-20 21:22:13
    要点: 之前 我们用原生js写的话,写id,通过dom操作获取元素进行操作 vue中用ref ...比如这边在h1和btn上加了ref则在vue component的$ref,收集了,title和btn元素 注意: 如果在一个组...
  • <!DOCTYPE html> <... <head> <meta charset="UTF-8"> <title>Title</title> ...script src="js/vue.js"></script> </head> <body> <d.
  • vue 使用 span 来修改值 的小坑

    千次阅读 2020-03-22 20:23:06
    使用vue,思路是 用 span 展现标签,点击 span 打开contenteditable ,使其可编辑,编辑完成后,回车完成修改,提交。 最开始可以正常运行,但偶然发现,在修改第一个span时,回车后,不会变还是之前的值。网上找了...
  • vue之data属性

    千次阅读 2021-02-11 15:04:26
    培训代码在new Vue()的时候,是可以给data...因为可能在多处调用同一组件,所以为了不让多处的组件共享同一data对象,只能返回函数 data属性的三种写法及区别:var app=new Vue({el:'#ap',data:{isLogin: false}})va...
  • vue中ref标签属性和$ref的关系,

    千次阅读 2019-09-28 18:13:08
    Vue给我们提供了一个专门用来获取DOM节点的方法 ,使用元素的ref属性,使用起来非常方便 (这只是用于偶尔vue需要操作节点时候才使用) vue的ref属性 ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件...
  • html标签属性中使用vue变量的写法

    千次阅读 2020-12-09 14:51:20
    <span slot="processResource" slot-scope="text, record"> <a :href="'/detail?id='+(record.resourceId)">{{record.resourceName}}</a> </span>
  • .vue文件style标签的几个标识符 在人生就要绝望的时候, 被编辑器所提示的一个scopedSlots所拯救. 卧槽, 写到最后才发现这个属性的具体卵用. 详情见最后解决办法. 问题背景 问题由来 项目使用了elementUI框架, ...
  • VueVue的< span >文字怎么加粗?

    千次阅读 2022-03-06 01:53:26
    VueVue的< span >文字怎么加粗? 资源 span文字加粗_span盒子对象内字体加粗
  • 目录插值表达式methodscomputed总结今天来说说vue中的计算属性computed,为了更好的理解计算属性的好处,我们先通过一个案例来慢慢 了解计算属性,有如下案例:定义两个输入框以及一个span标签span标签中的内容为...
  • Vue中的computed属性

    2022-01-04 23:09:52
    今天来说说vue中的计算属性computed,为了更好的理解计算属性的好处,我们先通过一个案例来慢慢 了解计算属性,有如下案例:定义两个输入框以及一个span标签span标签中的内容为两个输入框的值,span标签中的内容...
  • 文章目录常用属性`el``data``methods``computed`计算属性`watch`侦听器三种模板html模板字符串模板render函数模板 Vue.js是通过newVue({…})来声明一个实例的。 实例包含了当前页面的HTML结构、数据、事件。 在...
  • Vue标签动态绑定一个属性变量

    千次阅读 2020-05-22 14:55:55
    vue中我们有时候需要给一个普通标签动态绑定一个属性变量 那么可以使用模板字符串语法: <span :title="**`${drug.itemname} ${drug.itemgg}`**">{{ drug.itemname }} {{ drug.itemgg }}</span>
  • vue中的slot标签

    2021-11-23 12:14:20
    (二十八)Slot分发内容 ①概述: 简单来说,假如父组件需要在子组件内放一些DOM,那么这些DOM是显示、不显示、在哪个地方显示、如何显示,就是...显示内容是一个button按钮,不包含span标签里面的内容; ③单个slot
  • html的标签属性,比如id、class、href需要动态传递参数,拼接字符串,查了一些资料,并没有找到合适的解决方法,琢磨了一上午,终于试出了方法: v-bind:属性=“ ‘字符串’+自定义变量名”,自己试了没问题,有...
  • 八、VUE标签属性与条件渲染

    千次阅读 2018-05-09 16:01:49
    1,v-bind绑定标签属性(v-bind可以缩写为:号) VUE&lt;template&gt; &lt;div&gt; &lt;a :herf="link" v-bind:title="title"&gt;测试v-bind&lt;/a&gt; ...
  • 我们在vue中有时候为给标签加一些特有的属性, 当我们在标签上触发了事件之后, 就可以在 event 对象上面获取 标签的写法 <div class="menu-item" @click="clickMenu('参数一',$event)" :data-mytype="1"> &...
  • 语法: data-属性 <ul> <li v-for='item in list' > <span :data-index="item.id" @onclick ="cools($evevt)"></span> </li> </ul> methods:{ cools(ev...
  • vue中router-link标签属性

    千次阅读 2019-04-22 10:31:54
    设置 replace 属性的话,当点击时,会调用 router.replace() 而不是 router.push(),导航后不会留下 history 记录。 <router-link :to="{ path: '/abc'}" replace></router-link> append 设置 append 属性后,...
  • 由于我们在程序引入了reset.css,在这个css里面我们重置了一些的样式,从而一些样式的失效
  • vue中冒号+属性名是什么意思?

    千次阅读 2020-04-09 10:09:55
    所以常量属性不用加冒号,会变化的属性一般会添加冒号。 如element-admin-ui的这个组件:级联选择器 <el-cascader :options="cityList" :props="optionProps" v-model="selectedOptions" @change=...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 17,406
精华内容 6,962
关键字:

vue中span标签的属性

友情链接: romoine-interrupt.rar