<html>
<head>
<script type="text/javascript" src="vue.js"></script>
</head>
<style>
.class-a{background:#ffee00}
.class-b{background:#ff0000}
</style>
<body>
<div id="app">
<select v-model="sel" v-on:change="changeColor">
<option value="#c40000" selected>深红</option>
<option value="#ff0000">鲜红</option>
<option value="#0000FF">蓝色</option>
</select>
<input v-model="newTodo" v-bind:style="styleObject">
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
sel:'',
newTodo: '',
styleObject:{
'background':'#c40000'
}
},
methods: {
changeColor:function(){
var val = this.sel;
if(val){
this.styleObject.background = val;
}
}
}
})
</script>
vue.js的一个简单实例
猜你喜欢
转载自blog.csdn.net/chenbalala/article/details/52472686
今日推荐
周排行