<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<img v-bind:src="imgurl" />
<a v-bind:href="ahref">百度一下</a>
<h2>{{message}}</h2>
<img :src="imgurl" />
<a :href="ahref">百度一下</a>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好',
imgurl:'https://v2.cn.vuejs.org/images/logo.svg',
ahref:'http://www.baidu.com'
}
})
</script>
</body>
</html>
---------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.active{
color: orangered;
}
</style>
</head>
<body>
<div id="app">
<h2 v-bind:class="{active: isActive,line:isLine}">{{message}}</h2>
<button v-on:click="butclick">按钮</button>
</div>
<script src='../js/vue.js'></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好',
isActive:true,
isLine:true
},
methods:{
butclick:function(){
this.isActive = !this.isActive
}
}
})
</script>
</body>
</html>
------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h2 :style="{fontSize:finlSize + 'px',backgroundColor:finlcolor}">{{message}}</h2>
<h2 :style="getStyle()">{{msg}}</h2>
</div>
<script src='../js/vue.js'></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好',
msg:'嗯嗯',
finlSize:100,
finlcolor:'red',
},
methods:{
getStyle:function(){
return {fontSize:this.finlSize + 'px',backgroundColor:this.finlcolor}
}
}
})
</script>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
