Harigami
ログイン
1
monkukui タイトルなし
TypeScript
/// Questions.vue
<template>
  <div class="pagi-nation">
    <p>curPageId: {{curPageId}}</p>
    <p>totalItemNum: {{totalItemNum}}</p>

    <div v-for="id in questionsList">
      <div class="box">
        <p>title {{id}}</p>
        <p>description {{id}}</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Emit, Watch} from 'vue-property-decorator';

@Component
export default class PagiNation extends Vue {

  @Prop()
  private curPageId!: number; // 現在のページ番号
  @Prop()
  private totalItemNum!: number; // アイテムの合計数

  private questionsList: number[] = [];
  
  private getQuestionsList(): void {
    this.questionsList = [];
    for(let i: number = 1; i <= 10; i++) {
      this.questionsList.push(i + (this.curPageId - 1) * 10);
    }
  };
  public mounted(): void {
    this.getQuestionsList();
  };

  @Watch('curPageId')
  onCurPageIdChanged(): void {
    this.getQuestionsList();
  }

}
</script>

<style scoped>
.box {
  padding: 0.5em 1em;
  margin: 2em 0;
  font-weight: bold;
  color: #6091d3;/*文字色*/
  background: #FFF;
  border: solid 3px #6091d3;/*線*/
  border-radius: 10px;/*角の丸み*/
}
.box p {
  margin: 0; 
  padding: 0;
}
</style>
  • 0
  • 1
anonymous タイトルなし
TypeScript
type NodeType = VNode | string | number
type Attributes = {[key: string]: string | Function }

export interface View<State, Actions> {
  (state: State, actions: Actions): VNode;
}

/**
 * 仮想DOM
 */
export interface VNode {
  nodeName: keyof ElementTagNameMap
  attributes: Attributes
  children: NodeType[]
}

/**
 * 仮想DOMを生成
 */
export function h(
  nodeName: keyof ElementTagNameMap,
  attributes: Attributes,
  ...children: NodeType[]
): VNode {
  return { nodeName, attributes, children };
}

/**
 * リアルDOMを生成
 */
export function createElement(node: NodeType): HTMLElement | Text {
  if (!isVNode(node)) {
    return document.createTextNode(node.toString());
  }

  const el = document.createElement(node.nodeName)
}
  • 0
  • 1
あなたもコードを投稿しませんか?
投稿する
1