ホームページ >ウェブフロントエンド >jsチュートリアル >vueでタグスタイルを変更するにはどうすればよいですか?
vueでタグスタイルを変更するにはどうすればよいですか?
- 亚连オリジナル
- 2018-06-11 15:30:073561ブラウズ
この記事では、Vue でタグのスタイルを動的に変更する方法を主に紹介しますので、参考にしてください。
その会社は、Toutiao と同様のプロジェクトを実行する予定で、フロントエンドとバックエンドを分離して HTML5 ページを作成し、最初にその効果を確認したいと述べました。 Toutiao のヘッダーのナビゲーションはスクロールしてカテゴリを追加できます。これは私たちのプロジェクトにも当てはまります。したがって、ナビゲートするときにさまざまなカテゴリをクリックする必要があり、それに応じてスタイルも変わります。インターネットで検索したところ、簡潔でわかりやすい次のコードを見つけました。しかし、具体的なURLを忘れたので投稿します。 URL を知りたい場合は、オンラインで検索してください。
<!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='item in isp' @click='f1($index)'
:class="{'active': $index === isActive}">{{item}}</button>
</p>
<script type="text/javascript" src='vue.js'></script>
<script>
new Vue({
el:'#app',
data:{
isActive:0,
isp: ['BGP','中国电信','中国联通','联通电信双线']
},
methods:{
f1:function(index){
this.isActive=index
}
}
})
</script>
</body>
</html>次のように:
vue はタグのスタイルを動的に変更します。jpeg
以下は私のプロジェクトのコードです:
上記のコード、作者は vue バージョン 1.0 を使用し、以下は私が使用していますバージョン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="{ 'red-link':index === isActive }"
v-on:click.stop.prevent='switchTab(index)'>
{{ item }}
</a>
</p>
<script type="text/javascript" src='vue.js'></script>
<script>
new Vue({
el:'#app',
data:{
isActive:0,
menu: ['推荐', '人物', '干货', '行业', '融资','�教育','大数据'],
},
methods:{
switchTab: function (index) {
this.isActive = index;
}
}
})
</script>
</body>
</html>コードは基本的に同じですが、次回使用するときに見つけやすいように自分で整理しただけです。また、必要な友人が使用できることを願っています。
上記は私があなたのためにまとめたものです。
関連記事:
WeChatアプレットでPromiseを使用してコールバックを実装するにはどうすればよいですか?
npmを使用したElectronのインストールが失敗する問題
以上がvueでタグスタイルを変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。