Home >Web Front-end >JS Tutorial >How to modify a tag style in vue?

How to modify a tag style in vue?

亚连Original: 2018-06-11 15:30:073559browse

This article mainly introduces the method of dynamically modifying the style of a tag in vue. Now I will share it with you and give you a reference.

The company is going to do a project similar to Toutiao. It will use front-end and back-end separation to create an HTML5 page. It will be run on WeChat first. The leader said he wants to see the effect. The navigation in the header of Toutiao can be scrolled and categories added, and the same is true for our project. Therefore, when navigating, you need to click on different categories, and the style will also change accordingly. I searched on the Internet and found the following code, which is concise and clear. However, I forgot the specific URL, so I will post the code for everyone first. Take a look. If you want to know the URL, you can search it online.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .active{
      color: red;
    }
  </style>
</head>
<body>
  <p id="app">
    <button v-for=&#39;item in isp&#39; @click=&#39;f1($index)&#39; 
    :class="{&#39;active&#39;: $index === isActive}">{{item}}</button>
  </p>

  <script type="text/javascript" src=&#39;vue.js&#39;></script>
  <script>
    new Vue({
      el:&#39;#app&#39;,
      data:{
        isActive:0,
        isp: [&#39;BGP&#39;,&#39;中国电信&#39;,&#39;中国联通&#39;,&#39;联通电信双线&#39;]
      },
      methods:{
        f1:function(index){
          this.isActive=index
        }
      }
    })
  </script>
</body>
</html>

Like the following:

vue dynamically modifies the style of a tag.jpeg

The following is the code in my project:

For the above code, the author uses vue version 1.0, and below I use version 2.0.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .red-link{
      color: red;
    }
  </style>
</head>
<body>
  <p id="app">
    <a href="javascript:void (0);" rel="external nofollow" class="box1-item" 
       v-for="(item, index) in menu"
       :class="{ &#39;red-link&#39;:index === isActive }" 
       v-on:click.stop.prevent=&#39;switchTab(index)&#39;>
       {{ item }}
    </a>
  </p>

  <script type="text/javascript" src=&#39;vue.js&#39;></script>
  <script>
    new Vue({
      el:&#39;#app&#39;,
      data:{
        isActive:0,
        menu: [&#39;推荐&#39;, &#39;人物&#39;, &#39;干货&#39;, &#39;行业&#39;, &#39;融资&#39;,&#39;�教育&#39;,&#39;大数据&#39;],
      },
      methods:{
        switchTab: function (index) {
          this.isActive = index;
        }
      }
    })
  </script>
</body>
</html>

The code is basically the same, I just organized it myself to make it easier to find when I use it next time. I also hope that friends who need it can use it.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to use Baidu Map to implement map grid

Use selenium to capture Taobao data information

How to implement callbacks using Promise in WeChat applet?

The problem of failure to install Electron using npm

Using fullpage.js to implement scrolling

How to develop component libraries using React

The above is the detailed content of How to modify a tag style in vue?. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What are 7 practical tips about ES6?Next article：What are 7 practical tips about ES6?

See more

How to modify a tag style in vue?

Related articles