小编Pat*_*han的帖子

Vue JS将值传递给CSS属性

我正在开发考试门户应用程序。

在此处输入图片说明

这是我的代码。

<div class="" v-for="areas in knowledgeAreas">
        {{areas.area}}<div class="progress"  style="margin-top:10px;">
          <div class="progress-bar"  style="width:50%">{{areas.correctlyMarkedAnswers}} out of {{areas.numberOfQuestion}}</div>
        </div>

      </div>
Run Code Online (Sandbox Code Playgroud)

data(){
    return{
      knowledgeAreas :[
        { area: 'Math',numberOfQuestion:10,correctlyMarkedAnswers:3,correctAnswersPercentage:12 },
        { area: 'IQ',numberOfQuestion:10,correctlyMarkedAnswers:5,correctAnswersPercentage:5 },
        { area: 'GK',numberOfQuestion:10,correctlyMarkedAnswers:8,correctAnswersPercentage:3 }
      ]
    }
  }
Run Code Online (Sandbox Code Playgroud)

我想要的是将correctAnswersPercentage属性的值动态传递给CSS width属性。

vue.js vue-component vuejs2

1
推荐指数
1
解决办法
2420
查看次数

CSS伪元素如何改变颜色

我不擅长CSS.我是一个java脚本开发人员.我找到了一个代码来添加我的项目以在输入字段中添加星号标记.这是代码.任何人都可以告诉我如何使这个星号标记颜色为红色.

.required label::after {
  content: "*";
}
Run Code Online (Sandbox Code Playgroud)

任何帮助谢谢先进!

=)

css

1
推荐指数
1
解决办法
263
查看次数

Vue JS vuelidate自定义验证

我正在创建基本的库存管理系统。在此,我要验证的发票中,用户输入的价格必须大于或等于最低销售价格。我使用vuelidate软件包进行验证。

任何线索如何使用vuelidate实现这一目标

javascript vue.js vue-component vuejs2 vuelidate

1
推荐指数
1
解决办法
5974
查看次数

Bootstrap 4使用行和列类的正确方法

在我的div元素中,我想放置两行。在第一行包含两个inputelements.For这个原因,我可以把那两个输入元素分成两个单独的列。

但是在第二行中,只有一个按钮元素,我不能放在两列中。这是我的代码。

<div id="app">
    <div class="row">
      <div class="col">
        First name: <input type="text" name="" value="">
      </div>

      <div class="col">
        Last name:  <input type="text" name="" value="">
      </div>
    </div>

    <div class="row">
        <button type="button" name="button">Save</button>
    </div>
  </div>
Run Code Online (Sandbox Code Playgroud)

对于第二行而不是第二行,我必须将该按钮包装在列中。像这样

<div class="row">
      <div class="col">
        <button type="button" name="button">Save</button>
      </div>
    </div>
Run Code Online (Sandbox Code Playgroud)

还是我以前的代码很好?专业的方法是什么?我希望你能理解我的问题。谢谢。

layout user-interface frontend bootstrap-4

0
推荐指数
1
解决办法
1896
查看次数

VueJS Bootstrap CSS如何在页面底部放置元素?

在此处输入图片说明

我想在页面中放下页脚(版权声明)。但是它在页脚下方添加了一些额外的空白。我怎么除去这个额外的空白

我正在这个VueJS项目中做。这是我的代码。

应用程序

<template>
  <div class="fluid-container">
    <app-header></app-header>
    <div style="min-height:610px;">

      <router-view></router-view>

    </div>

<div>
  <app-footer></app-footer>
</div>

  </div>
</template>
Run Code Online (Sandbox Code Playgroud)

页脚

<template>
  <div class="fluid-container">
    <p class="text-center">Copyright &copy 2018, ABC Marketing. All Rights Reserved.</p>
  </div>
</template>
<script></script>
<style scoped>
div{
  color: white;
  background-color: #003459;

}
</style>
Run Code Online (Sandbox Code Playgroud)

css3 vue.js bootstrap-4 vuejs2

0
推荐指数
1
解决办法
1591
查看次数

让我们在 AWS Linux 上加密 certbot

我是 AWS 的新手,让我们对两者进行加密。我关注和文章并简单地运行这些命令

wget https://dl.eff.org/certbot-auto
chmod a+x certbot-auto
sudo cp certbot-auto /usr/bin/
Run Code Online (Sandbox Code Playgroud)

然后我运行这个命令。

sudo /usr/bin/certbot-auto --nginx -d example.com -d www.example.com --debug
Run Code Online (Sandbox Code Playgroud)

这给了我错误

抱歉,我不知道如何在您的操作系统上引导 Certbot!

您将需要安装操作系统依赖项、配置 virtualenv 并手动运行 pip install。请参阅 https://letsencrypt.readthedocs.org/en/latest/contributing.html#prerequisites 了解更多信息。

这究竟意味着什么?

如何在 AWS linux 上设置 certbot?

amazon-web-services lets-encrypt certbot

0
推荐指数
1
解决办法
2728
查看次数