筑坐极_Vue常用指令使用

<template>
  <div>
    <!--花括号插值-->
    <h2>{{ msg }}</h2>

    <!--v-text插值-->
    <h2 v-text="msg"></h2>

    <!--v-html插html代码-->
    <h2 v-html="msg2"></h2>

    <!--v-model:双向绑定-->
    <input type="text" v-model="inpVal">

    <!-- v-if : 用来判断元素是否需要渲染 -->
    <p v-if="ifTest">路飞</p>

    <!--v-show: 用来判断元素是否需要显示-->
    <p v-show="ifTest">路飞D</p>

    <!-- v-on: 用来绑定监听函数 -->
    <button v-on:click="changeIfTest">修改ifTest的值</button>

    <h4>循环1:</h4>
    <p v-for="(item, i) in arr">索引值:{{i}} 取到的值:{{item}}</p>

    <h4>循环2:</h4>
    <p v-for="(item, i) in newsTitles">
      <span v-if="i+1 === 1" class="t-num1">{{i+1}}</span>
      <span v-else-if="i+1 === 2" class="t-num2">{{i+1}}</span>
      <span v-else-if="i+1 === 3" class="t-num3">{{i+1}}</span>
      <span v-else>{{i+1}}</span>
      .{{item}}
    </p>

    <h4>循环3:</h4>
    <table border="1">
      <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
    
      </tr>
      <tr v-for="(item, i) in empInfo"  v-bind:class=" i%2 === 1 ? 'light-g':'' ">
        <td>{{item.num}}</td>
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
      </tr>
    </table>

  </div>
</template>

<script>
 import  Boot from "./Boot" ///*把同级的Boot导入进来*/


    export default {
        name: "lulululu",
      components:{Boot},
      data() {
    return {
      msg: "msg内容",
//       // msg2: "<i>msg2内容</i>",
//       inpVal: "易烊千玺",
//       ifTest: true,
//       // arr: [1001, 1002, 1003],
//       newsTitles: [
//         "几内亚发生兵变 军车驶过激烈交火",
//         "德国驻华大使贺岩去世",
//         "丁宁宣布退役",
//         "中国在几内亚机构人员情况总体稳定",
//         "中秋将至 这些地方恢复跨省旅游",
//         "女子称住酒店深夜遭陌生男刷卡进入",
//       ],
//       empInfo:[
//         {num:1000001, name:"赵", age:25},
//         {num:1000002, name:"钱", age:35},
//         {num:1000003, name:"孙", age:45},
//         {num:1000004, name:"李", age:36},
//       ]
//     }
//   },
//   methods: {
//     changeIfTest: function () {
//       console.log(this.ifTest);
//       this.ifTest = true;
//
//       console.log("搜索");
//     },
//     changeIfTest2: function () {
//       console.log("搜索2");
  }
}
//
//
//
//
}
</script>

<style scoped>
  .t-num1 {
    color: #fe2d46;
  }

  .t-num2 {
    color: #f60;
  }

  .t-num3 {
    color: #faa90e;
  }
  .light-g{
    background-color: lightgray;
  }
</style>
Vue常用指令使用

韩琳*

vue

Vue常用指令使用

2021.09.08

832人

韩琳*

天津市宁河县

Hot:11370

韩琳*

当前作品暂无评分

还未获得评语哦~
