初入前端开发从0到1——Vue+Vant开发外卖点单项目学习记录（1）

 需求：vant的Popup 弹出层只能设置固定高度，无法根据商品卡片数量改变高度。

引入

import Vue from 'vue';

import { Popup } from 'vant';

Vue.use(Popup);

基础用法

<van-cell is-link @click="showPopup">展示弹出层</van-cell>
<van-popup v-model="show">内容</van-popup>

export default {
  data() {
    return {
      show: false,
    };
  },

  methods: {
    showPopup() {
      this.show = true;
    },
  },
};

 

 

 解决办法（设想）：通过JS控制样式

解决思路：

document.getElementsByClassName（JS选择器——根据样式class选择容器）

document.getElementById（JS选择器——根据id选择容器）

<p id="p1">Hello World!</p>//需改变样式

<p class="p2">Hello World!</p> //需改变样式

document.getElementById("p1").style.color="blue";//改变p1文字颜色

var sd=document.getElementsByClassName("p2");//改变p2颜色文字大小
sd[0].style.color="red";
sd[0].style.fontSize="30px";

注意:

document.getElementsByClassName拿到的是数组并非某一个对象

var box = document.getElementsByClassName("box"); box.value; //返回undefined 

var box = document.getElementsByClassName("box"); 2 box[0].value; //返回 box的内容

结果：

 

总结：

jquery的操作方式是$(classSelector)，获取的是需要的那个对象，而我在使用JS忽略了最重要的class可复用，id不可复用原则。所以js之前没做getElementByClassName也是出于严谨的考虑，现在document.getElementsByClassName返回数组应该也是出于严谨的考虑。