<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div>
请选择展示形式：
<input type="radio" id="one" value="face" v-model="classValue"> //1.处数据model和数据alue绑定在一起
<label for="one">笑脸</label>
<input type="radio" id="two" value="msg" v-model="classValue">
<label for="two">信息</label>
<div class="{{ classValue }}">{{ innerText }}</div>//此处用到上面的数据绑定
</div>
</body>
</html>
css代码：
.face{
height: 1000px;
width: 1000px;
background-color: rebeccapurple;
}
.msg{
height: 1000px;
width: 1000px;
background-color: blanchedalmond;
}
js代码：
window.onload = function() {
var dataList = {
classValue: 'face',
innerText: '大家好，欢迎！'
};
new Vue({
el: 'div',
data: dataList
});
};运行结果：
7506
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
