!DOCTYPE htmlhtml head meta charset=utf-8 titletitle style active colorred style head body div id=div1 div v-for=itemindex in data liinput type=checkboxitempriceli div

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></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;https://cdn.jsdelivr.net/npm/vue/dist/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
				}],
			methods:{
				fn(){
					for(let i=0;i&lt;this.data.lenght;i++){
						console.log(this.data);
					}
				}
			}
		})
	&lt;/script&gt;
&lt;/body&gt;
</code></pre>
</html