v-show 用法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="../day7/vue.js"></script>
</head>
<body><div id="app"><input type="button" value="按钮" @click="toggles"><!-- v-show 使用display none--><p v-show='isshow'>天下第一</p></div><script>var app = new Vue({el:'#app',data:{isshow:true, //true显示 - false隐藏},methods:{toggles:function(){// this指向vue 实例对象// data中的数据可以直接使用对象.去访问this.isshow = !this.isshow;}}});</script>
</body>
</html>
v-if 用法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="../day7/vue.js"></script>
</head>
<body><div id="app"><div v-if="da==8">aaa</div><div v-else-if="da>5">bbb</div> <div v-else>CCCC</div> <!-- 前面不成立就显示 --></div>
</body>
<script>var app = new Vue({el:'#app',data:{da:3,},methods:{}});
</script>
</html>
V-CLOAK用法：
网络延时，加载vue.js慢 先不显示{
{msg}} ,待加载完成后显示内容！
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="../day7/vue.js"></script><style>/* 需要配和css样式 */[v-cloak]{display: none;}[aa='a2']{color:hotpink;}</style>
</head><body><div id="app"><p v-cloak>{
{msg}}</p><p aa='a2'>1</p></div>
</body>
<script>setTimeout(()=>{var app = new Vue({el: '#app',data: { msg: '我是一个vue的数据' },methods: {}});},3000);
</script></html>
v-once用法
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="../day7/vue.js"></script>
</head><body><div id="app"><!-- 使用v-once console.log中修改也不受音响，单次绑定 --><p v-once>{
{msg}}</p></div>
</body>
<script>var app = new Vue({el: '#app',data: {msg:'111'},methods: {}});
</script></html>