准备步骤如第一天
代码:(测试注意事项:js中的代码依次开启测试,不可全部开启,会报错)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/vue-resource/dist/vue-resource.js"></script>
</head>
<body>
<!--v-if指令,判断-->
<div id="app1">
<p v-if="ok">测试条件判断</p>
<p v-if="no">测试条件判断</p>
<button v-on:click="ceshi">测试按钮</button>
</div>
<br>
<!--v-if-->
<div id="app2">
<p v-if="message==='a'">{{message}}=a</p>
<p v-else-if="message==='b'">{{message}}=b</p>
<p v-else>{{message}}={{message}}</p>
</div>
<br>
<!--v-show 指令-->
<div id="app3">
<h1 v-show="ok">Hello!</h1>
</div>
</body>
<script type="text/javascript">
/*v-if指令*/
/* new Vue({
el:'#app1',
data:{
ok:true,
no:false
},methods:{
ceshi:function () {
data:{
no:'false'
}
}
}
})*/
/* /!*v-if-else指令*!/
new Vue({
el:'#app2',
data:{
message:'b'
}
})*/
/*v-show 指令*/
new Vue({
el: '#app3',
data: {
ok: true
}
})
</script>
</html>