筑坐极_vue中的常用指令

vue中常用的指令
<template>
  <div>
    <h2>vue的内容</h2>

  <h2>{{msg}}</h2>

    <h2 v-text="msg1"></h2>

    <h2 v-html="msg2"></h2>

    <input type="text" v-model="inpVal">

   <p v-if="ifTest">测试</p>

   <p v-show="ifTest">测试2</p>

    <button v-on:click="textVal">修改ifTest的值</button>
    <button v-on:click="textVal2">测试2</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="num1">{{i+1}} </span>
      <span v-else-if="i+1===2"class="num2">{{i+1}} </span>
      <span v-else-if="i+1===3"class="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 star" v-bind:class=" i%2 === 1 ? 'light-g':''">
        <td>{{item.num}}</td>
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
      </tr>
    </table>

    <h2>以下是tue.vue的部分</h2>
    <tue></tue>
  </div>
</template>

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


    export default {
        name: "sss",
      components: {tue},//注册子组件

      data(){ /*不要加funtion的函数*/
          return{
            msg:"msg的内容",
            msg1:"text插值的内容.vue",
            msg2:"<i>html的内容.vue</i>",
            inpVal: "你好",
            ifTest:true,
            arr:[1001,1002,1003],
            newsTitles: [
              "几内亚发生兵变 军车驶过激烈交火",
              "德国驻华大使贺岩去世",
              "丁宁宣布退役",
              "中国在几内亚机构人员情况总体稳定",
              "中秋将至 这些地方恢复跨省旅游",
              "女子称住酒店深夜遭陌生男刷卡进入",
            ],
            star:[
              {num:1,name:"杨幂",age:30},
              {num:2,name:"杨盼盼",age:60},
              {num:3,name:"赵丽颖",age:31},
              {num:4,name:"佟丽娅",age:35},
              {num:5,name:"童谣",age:32},
            ]
          }
      },
      methods:{
          textVal:function () {
           console.log(this.ifTest);
            this.ifTest=true;

            console.log("明日之战");
          },
        textVal2:function () {
          console.log("明日之战2");
        },
      }
    }
</script>

<style scoped>
.num1{
  color:red;
}
  .num2{
    color:yellowgreen;
  }
  .num3{
    color:cornflowerblue;
  }
  .light-g{
    color: aqua;
  }
</style>
效果
vue中的常用指令
vue中的常用指令

苏林*

vue中的常用指令

vue中的常用指令

2021.09.07

796人

苏林*

天津市大港区

Hot:13688

苏林*

当前作品暂无评分

还未获得评语哦~
