筑坐极_vue的常用指令使用

vue的常用指令使用
<template>
    <div>
      <thehead></thehead>
      <h2>{{a}}</h2>
      <h2 v-text="b"></h2>
      <h2 v-html="c"></h2>
      <h2 v-if="d">天丛云</h2>
      <h2 v-show="e"></h2>
      <input type="text" v-model="f">
      <p v-for="(g,h) in jk">索引：{{h}} 取值：{{g}}</p>
      <button v-on:click="l">修改显示天丛云</button>
      <table class="table table-striped">
        <caption>员工信息</caption>
        <thead>
        <tr>
          <th>#</th>
          <th>ID</th>
          <th>Name</th>
          <th>age</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item, i) in emp">
          <th scope="row">{{i+1}}</th>
          <td>{{item.num}}</td>
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
        </tr>
        </tbody>
      </table>
      <button v-on:click="tiger" class="my-2">添加员工信息</button>
      <thetail></thetail>
    </div>
</template>

<script>
  import thehead from './New project/thehead'
  import thetail from './New project/thetail'
    export default {
        name: "flame",
      components:{thehead,thetail},
      data(){
          return{
            a:"有一个人前来买瓜",
            b:"<i>老板，你这瓜怎么卖</i>",
            c:"<i>两块钱一斤</i>",
            d:false,
            e:true,
            f:"你这瓜保熟吗",
            jk:["小马","小东","小虎"],
            emp:[
              {num:1000001, name:"小王", age:29},
              {num:1000002, name:"小里", age:39},
              {num:1000003, name:"小张", age:21},
              {num:1000004, name:"小龙", age:25},
            ],
          }
      },
      methods:{
          l:function () {
               this.d=true
          },
          tiger:function () {
            let chinese="君不见黄河之水天上来奔流到海不复回\n" +
              "君不见高堂明镜悲白发朝如青丝暮成雪\n" +
              "人生得意须尽欢莫使金樽空对月\n" +
              "天生我材必有用千金散尽还复来\n" +
              "烹羊宰牛且为乐会须一饮三百杯\n" +
              "岑夫子丹丘生将进酒杯莫停\n" +
              "与君歌一曲请君为我倾耳听\n" +
              "钟鼓馔玉不足贵但愿长醉不复醒\n" +
              "古来圣贤皆寂寞惟有饮者留其名\n" +
              "陈王昔时宴平乐斗酒十千恣欢谑\n" +
              "主人何为言少钱径须沽取对君酌\n" +
              "五花马千金裘呼儿将出换美酒与尔同销万古愁"
            chinese.replace(/\s+/g,"")
            console.log(chinese);
            function randInt(min, max) {
              return parseInt(Math.random() * (max - min + 1)) + min;
            }
            let nameN="";
            let china=randInt(2,2)
            let kk=chinese.length
            for (let i=0;i<china;i++) {
                let  key=kk-1;
                let  ks=randInt(0,key)
                let  N=chinese[ks]
              nameN=nameN+N;
            }
            let ageN=randInt(25,50);
            let numN=this.emp[(this.emp.length-1)]["num"]+1;
            this.emp.push({num:numN,name:nameN,age:ageN})
          }
      }
    }
</script>

<style scoped>

</style>
vue的常用指令使用

苏*

vue,js,css

v-text,v-html,v-if,v-show等使用

2021.09.07

1164人

苏*

天津市河东区

Hot:17734

苏*

当前作品暂无评分

还未获得评语哦~
