흥미로운 부트스트랩 걷기 진행률 표시줄

이 튜토리얼에서는 참조용으로 "걷는" 부트스트랩 진행률 표시줄을 만드는 방법을 설명합니다.

1. 페이지 효과:

시작 위치:

"이동" 버튼 클릭 후

2.html 코드:

<div>
<div class="progress progress-striped active">
 <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" v-bind:style="progressStyle">进度条</div>
</div>
<button type=&#39;button&#39; v-on:click=&#39;queryEnterprise&#39; class=&#39;btn btn-primary&#39;>走</button>
</div>

v-bind:style="progressStyle"

바인드 인라인 스타일:

a. 객체 구문: v-bind:style의 객체 구문은 매우 직관적입니다. CSS와 매우 비슷해 보이지만 실제로는 JavaScript 객체입니다. CSS 속성 이름은 camelCase 또는 kebab-case로 지정할 수 있습니다.

예:

html:

<div v-bind:style="{ color: activeColor, fontSize: fontSize + &#39;px&#39; }"></div>

js:

data: {
 activeColor: 'red',
 fontSize: 30
}

일반적으로 스타일 개체에 직접 바인딩하여 템플릿을 더 명확하게 만드는 것이 좋습니다.

html:

<div v-bind:style="styleObject"></div>

js:

data: {
 styleObject: {
 color: 'red',
 fontSize: '13px'
 }
}

b .Array 구문: 배열 구문 v-bind:style은 요소에 여러 스타일 객체를 적용할 수 있습니다:

예:

html:

<div v-bind:style="[styleObjectA, styleObjectB]">

data: {
 styleObjectA: {
 color: 'red'
 },
 styleObjectB:{
 fontSize: '13px'
 }
}

c. 자동으로 접두사 추가: v-bind:style이 변환과 같은 공급업체 접두사가 필요한 CSS 속성을 사용하는 경우 Vue.js는 해당 접두사를 자동으로 감지하고 추가합니다.

3.js 코드:

<script>
export default {
 components:{},
 props:{},
  ready:function(){},
  computed:{},
  methods:{
   queryEnterprise:function(){
    if(parseInt(this.progressStyle.width)<100){
     this.progressStyle.width=parseInt(this.progressStyle.width)+30+&#39;%&#39;;
    }else{
     alert("进度条已经走完");
    }
   }
  },
 data () {
  return {
   //进度条样式
    progressStyle:{
     width:&#39;10%&#39;,
    },
  }
 },
 
}
</script>

4.style

.progress {
 height: 40px;
 transition: 3s;
}
.progress-bar {
 font-size: 16px;
 line-height: 40px;
}

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다