目录
1、v-bind
除了文本插值,我们还可以像这样来绑定元素 attribute
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>Java</h1>
<!--view层 模板-->
<div id="app">
<span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息!</span>
</div>
</body>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
//Model:数据
data: {
message: "hello,vue1"
}
})
</script>
</html>
输出效果:
如果用
vm.message="hello1"
'hello1'
- 这里我们遇到了一点新东西。你看到的
v-bind
attribute 被称为指令。- 指令带有前缀
v-
,以表示它们是 Vue 提供的特殊 attribute。- 可能你已经猜到了,它们会在渲染的 DOM 上应用特殊的响应式行为。在这里,该指令的意思是:“将这个元素节点的
title
attribute 和 Vue 实例的message
property 保持一致”。- 如果你再次打开浏览器的 JavaScript 控制台,输入
vm2.message = '新消息'
,就会再一次看到这个绑定了title
attribute 的 HTML 已经进行了更新。
2、v-if...v-else-if...v-else
v-if函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view层,模板-->
<div id="app">
<!-- v-if 默认是true-->
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
//Model:数据
data: {
ok: true
}
})
</script>
</body>
</html>
默认是true
自己使用进行修改
vm.ok=false
false
v-if-else
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view层,模板-->
<div id="app">
<!-- v-if 默认是true-->
<h1 v-if="type==='A'">A</h1>
<h1 v-else-if="type==='B'">B</h1>
<h1 v-else-if="type==='C'">C</h1>
<h1 v-else>D</h1>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
//Model:数据
data: {
type: 'A'
}
})
</script>
</body>
</html>
默认是A
如果使用
vm.type=1
1
如果使用
vm.type='B'
'B'
vm.type='C'
'C'
v-for循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view层,模板-->
<div id="app">
<!--item in items这个的意思就是在items中去创建一个新的item-->
<li v-for="item in items">
{{item.message}}
</li>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
let vm = new Vue({
el: "#app",
//Model:数据
data: {
items: [
{message: '杉木爱java'},
{message: '山姆爱vue'},
{message: '山姆爱运维'}
]
}
});
</script>
</body>
</html>
输出效果: