Vue.js 动态绑定 class 实现选中后改变文字颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue.js 动态绑定 class 实现选中后改变文字颜色</title>
		<style>
<pre><code>		.active {
			color: red;
		}
		
	&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;div id=&quot;div1&quot;&gt;
		&lt;div v-for=&quot;(item, index) in data&quot;&gt;
			&lt;li :class=&quot;{active: item.flag}&quot;&gt;
				&lt;input type=&quot;checkbox&quot; v-model=&quot;item.flag&quot;&gt;
				{{item.price}}
			&lt;/li&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;!-- 用动态绑定class 完成 当选中后 该条数据变成红色字体黑点变红点 --&gt;
	&lt;script src=&quot;./vue.js&quot;&gt;&lt;/script&gt;
	&lt;script&gt;
		new Vue({
			el: '#div1',
			data: [{
				id: 100,
				flag: false,
				price: 199
			}, {
				id: 101,
				flag: false,
				price: 34
			}, {
				id: 102,
				flag: false,
				price: 25.4
			}, {
				id: 103,
				flag: false,
				price: 100
			}]
		})
	&lt;/script&gt;
&lt;/body&gt;
</code></pre>
</html>