vue（5）联动+tab页

来自：https://juejin.im/post/5a0c191f6fb9a04514639419

1、联动

新增 <input v-model="msg" />

<div id="app">

  <!-- 模板，用于展示数据 -->

  {{msg}}<br/>

  <input v-model="msg" />

</div>

效果

当删除/修改/新增文本框中的字符时，上边的也会跟着一起变。

2、选项卡

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <script src="js/vue.js"></script>

  <style>

    body {

      font-family: "Microsoft YaHei";

    }

    #tab {

      width: 600px;

      margin: 0 auto;

    }

    .tab-tit {

      font-size: 0;

      width: 600px;

    }

    .tab-tit a {

      display: inline-block;

      height: 40px;

      line-height: 40px;

      font-size: 16px;

      width: 25%;

      text-align: center;

      background: #ccc;

      color: #333;

      text-decoration: none;

    }

    .tab-tit .cur {

      background: #09f;

      color: #fff;

    }

    .tab-con div {

      border: 1px solid #ccc;

      height: 400px;

      padding-top: 20px;

    }

  </style>

</head>

<body>

  <div id="tab">

    <div class="tab-tit">

      <!--点击设置curId的值  如果curId等于0，第一个a添加cur类名，如果curId等于1，第二个a添加cur类名，以此类推。添加了cur类名，a就会改变样式 @click,:class ,v-show这三个是vue常用的指令或添加事件的方式-->

      <a href="javascript:;" @click="curId=0" :class="{'cur':curId===0}">html</a>

      <a href="javascript:;" @click="curId=1" :class="{'cur':curId===1}">css</a>

      <a href="javascript:;" @click="curId=2" :class="{'cur':curId===2}">javascript</a>

      <a href="javascript:;" @click="curId=3" :class="{'cur':curId===3}">vue</a>

    </div>

    <div class="tab-con">

      <!--根据curId的值显示div,如果curId等于0，第一个div显示，其它三个div不显示。如果curId等于1，第二个div显示，其它三个div不显示。以此类推-->

      <div v-show="curId===0">

        html

        <br/>

      </div>

      <div v-show="curId===1">

        css

      </div>

      <div v-show="curId===2">

        javascript

      </div>

      <div v-show="curId===3">

        vue

      </div>

    </div>

  </div>

</body>

<script>

  new Vue({

    el: '#tab',

    data() {

      return {

        curId: 0

      }

    },

    computed: {},

    methods: {},

    mounted: function () {

    }

  })

</script>

</html>

巴特西

vue（5）联动+tab页

最新文章

热门文章