版权声明：知末随未 https://blog.csdn.net/mo3408/article/details/90049133
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue指令</title>
</head>
<body>
<script type="text/javascript" src=" https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<!-- v-text 添加纯文本 -->
<!-- v-html 识别html标签 -->
<!-- v-once只渲染一次 无表达式-->
<!-- v-show 通过布尔值显示和隐藏，安全性不高，特效使用
<!--v-if生成或移除,安全性较高-->
<!-- v-for 数组，对象-->
<!-- v-cloak 编译结束 -->
<div id="app">
<!-- v-text -->
<p v-text="mess"></p>
<!-- v-html -->
<p v-html="mess"></p>
<p>{{mess}}</p>
<p v-once>{{data}}</p>
<input type="text" v-model="data">
<p v-show="show1">vue显示</p>
<p v-show="hide1">vue隐藏</p>
<p v-if="show1">vue显示</p>
<p v-if="hide1">vue隐藏</p>
<p v-for="(item,index) in list">{{item}}</p>
<p v-for="item in list">{{item}}</p>
<p v-for="(item,key,index) in obj1">{{item}}--{{key}}--{{index+1}}</p>
<p v-for="(item,key) in obj1">{{item}}--{{key}}</p>
<p v-for="key in obj1">{{key}}</p>
</div>
<script type="text/javascript">
var arr=['1','2','3','4'];
var obj={
name:'t',
sex:'s',
age:'22'
}
new Vue({
el:'#app',
data:{
mess:'<b>123</b>',
data:'123',
show1:true,
hide1:false,
list:arr,
obj1:obj
}
})
</script>
</body>
</html>