How to modify a tag style in vue?-JS Tutorial-php.cn

How to modify a tag style in vue?

亚连

Release： 2018-06-11 15:30:07

Original

3557 people have browsed it

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>

Copy after login

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>

Copy after login

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!