日常bug总汇

日常bug总汇(上班第一天)

图片与图片之间有缝隙

• 该图片为块级元素
• 设置body的line-height:0;

art-template模板遍历对象

html部分:

<!-- 渲染模板显示的位置 -->
<div id="content"></div>

模板js部分

<!-- 引入对应的模板 -->
<script src="https://www.dfs168.com/output/js/template.js"></script>
<!-- 模板使用放在script中,给script标注id -->
<script type="text/html" id="contenttpl"> 
    <ul>
        {{each list as value i}} //遍历的元素可以是数组也可以是对象
        <li>
            <div class="left">
                <img src="{{value.goods_image}}"
                    alt="">
            </div>
            <div class="right">
                <div class="tit">
                    {{value.goods_name}}
                </div>
                <div class="trait">{{value.tag}}</div>
                <div class="price">
                    <div class="now">活动价 <i> ¥ </i><span>{{value.goods_price}}</span></div>
                    <del class="old">原价<span>¥{{value.goods_marketprice}}</span></del>
                </div>
                <div class="pay"><a href="{{value.pc_url}}">立即购买 ></a></div>
            </div>
        </li>
        {{ /each }}
    </ul>
</script>

js调用

<script>
    $.ajax({
        url: "https://www.dfs168.com/wgfd/goods/jsons?id=12yuedongjimaizengzhuanchang",
        type: 'GET',
        data: {},
        dataType: 'jsonp',
        jsonp: 'callback',
        contentType: "application/javascript;utf-8",
        jsonpCallback: 'flightHandler',
        success: function (data) {
            //console.log(data)
            var html = template('contenttpl', {list:data}); //生成对于html.template(参数1,参数2) 参数1为模板所在位置的id,参数2为渲染参数,一定是一个对象
            //console.log(html)
            document.getElementById('content').innerHTML = html;//添加到指定位置
        }
    });
</script>

注:使用模板可以遍历数组也可以遍历对象,遍历对象的话,低版本需要包裹.

vue中使用lsee

• npm安装less

npm install less less-loader --save

• 配置对应的loader
  myObject>build>webpack.base.conf.js中配置

{
  test: /\.less$/,        
  loader: "style-loader!css-loader!less-loader",        
}

• 页面中使用:在组件中的style 添加lang=“less”

<!-- 在组件中的style 添加lang="less" -->
<style scoped lang="less">
.search {
display: flex;
.input {
  flex: 1;
  color: #fff;
  line-height: 30px;
  background-color: rgba(11, 59, 11, 0.6);
  display: flex;
  border-radius: 5px;
  input {
    border: none;
    display: block;
    color: #fff;
    background: none;
    height: 30px;
    font-size: 16px;
    line-height: 32px;
    flex: 1;
    outline: none;
  }
}
.icon-dianhua {
  display: block;
  width: 30px;
  height: 32px;
  line-height: 32px;
  font-size: 30px;
  text-align: center;
  margin-left: 10px;
  color: #fff;
  background-color: rgba(11, 59, 11, 0.6);
  border-radius: 5px;
}
}
</style>