内容与属性中间使用JS表达式

来源:互联网 发布:jsp声明调用java类 编辑:程序博客网 时间:2024/05/27 20:52

有时候我们不希望直接在data这个数据库中输入具体的数字,而是希望它定值增长。这个时候也许就要用到表达式了,表达式不仅可以控制页面上的值还可以控制页面上的属性


<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue.js"></script>
<style type="text/css">
.hd1{
color: green;
}
.hd2{
color: orangered;
}
</style>
</head>
<body>
<div id="tencent">
{{n+4}}
<h1 :class="'hd'+n">你好</h1>
<input type="text"  v-model="n"/>
<br />
<br />
<input type="radio" v-model="n" value="1"/>绿色
<input type="radio" v-model="n" value="2" />橙色
</div>
<script type="text/javascript">
var app = new Vue({
el:'#tencent',
data:{
n:1
}
});
</script>
</body>
</html>


运行效果如图: