<二>数据和方法的绑定
上一节学习了参数和方法的定义，现在学习下vue的一些语法。
1、渲染 ：{{ }},v-text,v-html的使用
<div id="app"> {{ message }} //插值表达式： 直接将定义的变量放在 hmtl中，使用两个中括号包起来，这里是可以使用js 函数，比如：message.join('') </div>
<div id="app" v-text="message"> //v-text可以向元素中输出文本内容 </div>
<body>
<div id="app" v-html="message"> //v-html不仅可以向元素中输出文本，也可以直接输出带样式的一些元素
</div>
</body>
<script src="vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: '<h2>h</h2>'
},
})
</script>
2、绑定：v-bind的使用，用来绑定全局属性 id,title,style,class 等
<body>
<div id="app" >
<span v-bind:title="message +' '+ msg">{{message}}</span>
</div>
</body>
<script src="vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message:'Hello vue!',
msg:'yy'
}
})
</script>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.active {
width: 100px;
height: 100px;
background: green;
}
.text-danger {
background: red;
}
</style>
</head>
<body>
<div id="app" >
<div v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div>
<div v-bind:class="classObject"> </div>
<div v-bind:class="classObject1"> </div>
<div v-bind:class="[activeClass, errorClass]"></div>
<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
</body>
<script src="vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data:{
isActive: true,
hasError: true,
activeClass:'active',
errorClass:'text-danger',
classObject:{
'active': true,
'text-danger': true
}
},
computed: {
classObject1: function () {
return {
'active': this.isActive,
'text-danger': this.hasError,
}
}
}
})
</script>
</html>
<body>
<div id="app" >
<div v-bind:style="{ color:colorGreen, fontSize: fontSize + 'px',background:'red' }">内联样式</div>
<div v-bind:style="styleObject">绑定样式对象</div>
<div v-bind:style="[styleObject, styleObject1]">多样式绑定</div>
</body>
<script src="vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data:{
colorGreen: 'green',
fontSize: 12 ,
styleObject: {
color: 'green',
fontSize: '30px',
background:'red'
},
styleObject1: {
fontSize: '12px',
}
},
})
</script>
3、条件语句 v-if、v-else、v-else-if
<body>
<div id="app" >
<div v-if="type === 'A'" v-bind:style="{ color:colorGreen, fontSize: fontSize + 'px',background:'red' }">内联样式</div>
<div v-if="type === 'B'" v-bind:style="styleObject">绑定样式对象</div>
<div v-if="type === 'C'" v-bind:style="[styleObject, styleObject1]">多样式绑定</div>
</body>
<script src="vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data:{
type:'A',
colorGreen: 'green',
fontSize: 12 ,
styleObject: {
color: 'green',
fontSize: '30px',
background:'red'
},
styleObject1: {
fontSize: '12px',
}
},
})
</script>
4、循环 v-for 语句 比 v-if 的优先级高
<body>
<div id="app" >
<ul>
<li v-for="site in sites">
{{ site.name }}
</li>
</ul>
<ul>
<li v-for="value in object">
{{ value }}
</li>
</ul>
<ul>
<li v-for="(value, key) in object">
{{ key }} : {{ value }}
</li>
</ul>
<ul>
<li v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }}
</li>
</ul>
<ul>
<li v-for="n in 10">
n
</li>
</ul>
</body>
<script src="vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data:{
sites: [
{ name: 'Runoob' },
{ name: 'Google' },
{ name: 'Taobao' }
],
object: {
name: '菜鸟教程',
url: 'http://www.runoob.com',
slogan: '学的不仅是技术，更是梦想！'
}
},
})
</script>
浙公网安备 33010602011771号