<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.bg_blue{background: #4169E1;}
.border{border: 2px solid darkblue;}
</style>
</head>
<body>
<div id="app">
<!--v-bind将变量绑定到元素属性的值，支持所有内置属性和自定义属性；可以简写为 :-->
<!--将value属性绑定到data数据的val-->
<input type="button" v-bind:value="val" />
<!--将type属性绑定到data数据的type，从而把原本type为button的按钮元素变成type为text的文本框元素-->
<input type="button" v-bind:type="type" :value="val"/>
<!--常见的属性class/id/href/src/type....-->
<!--:class和class是可以共存的-->
<p :class="cls" class="bg_blue">test</p>
<!--:class可以以数组方式存在，未在vue定义的属性值须加""引号-->
<p :class="[cls,'bg_blue']">test</p>
<!--:class可以以对象方式存在-->
<p :class="{cls:false,'bg_blue':true}">test</p>
<!--:style在Vue定义中，使用行间样式表方式也是使用对象方式-->
<p :style="myStyle">test</p>
<p :style="myStyle2">test</p>
</div>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
val:"hello",
type:"text",
cls:"border",
myStyle:"font-size:28px;color:red",
myStyle2:{color:'yellow'}
}
})
</script>
</body>
</html>
网友评论