v-text：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<script src="./static/vue.min.js"></script>
</head>
<body>
<div id="app" v-text="greeting"></div>
<script>
// 数据模板引擎：
// v-开头的指令是帮助我们渲染数据用的
new Vue({
el:"#app",
data:{
greeting:"Hello Vue",
}
})
</script>
</body>
</html>
v-html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<script src="./static/vue.min.js"></script>
</head>
<body>
<div id="app" v-html="greeting"></div>
<script>
// 数据模板引擎：
// v-开头的指令是帮助我们渲染数据用的
new Vue({
el:"#app",
data:{
greeting:"<h1>Hello Vue</h1>",
}
})
</script>
</body>
</html>
v-for：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<script src="./static/vue.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="aihao in funingbo">{{ aihao }}</li>
</ul>
<ul>
<li v-for="student in students">姓名：{{ student.name }},年龄：{{ student.age }},爱好：{{ student.hobby}}</li>
</ul>
</div>
<script>
// 数据模板引擎：
// v-开头的指令是帮助我们渲染数据用的
new Vue({
el:"#app",
data:{
funingbo:["披黄袍","吃鸡","大鱼大肉","骑士"],
students:[
{
name:"张敏聪",
age:28,
hobby:"girls",
},
{
name:"徐卫星",
age:35,
hobby:"oldboy",
},
{
name:"赵岩",
age:21,
hobby:"sao",
}
]
}
})
</script>
</body>
</html>
v-if：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<script src="./static/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-if="role == 'cainingning'">
<h1>欢迎美女光临~~~</h1>
</div>
<div v-else-if="role == 'juyingying'">
<h1>欢迎美女再次光临~~~</h1>
</div>
<div v-else>
<h1>gun</h1>
</div>
</div>
<script>
// 数据模板引擎：
// v-开头的指令是帮助我们渲染数据用的
new Vue({
el:"#app",
data:{
role:"cainingning"
}
})
</script>
</body>
</html>
v-show：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<script src="./static/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-show="isShow">Hello Vue</div>
</div>
<script>
// 数据模板引擎：
// v-开头的指令是帮助我们渲染数据用的
let vm = new Vue({
el:"#app",
data:{
isShow:false
}
})
</script>
</body>
</html>
v-bind：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<script src="./static/vue.min.js"></script>
<style>
.active {
500px;
height: 500px;
background-color: lawngreen;
}
</style>
</head>
<body>
<div id="app">
<a v-bind:href="jingdong" >去京东</a>
<div :class="{ active : isActive }"></div>
<div :class="[ isActive ]"></div>
</div>
<script>
// 数据模板引擎：
// v-开头的指令是帮助我们渲染数据用的
let vm = new Vue({
el:"#app",
data:{
jingdong:"https://www.jd.com",
isActive:true,
}
})
</script>
</body>
</html>