举例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<title>vue的常用指令</title>
</head>
<body>
<div id="app">
<!--1.v-once不动态改变只读取一次-->
<p v-once>原始值：{{msg}}</p>
<p>后面值：{{msg}}</p>
<!--2.v-model动态改变msg-->
<input type="text" v-model="msg" /><br />
<!--3.v-if条件渲染-->
<p v-if="show">if要显示出来</p>
<p v-if="hide">if不要显示出来</p>
<p v-if="height>1.55">if小米身高{{height}}米</p>
<p v-show="show">show要显示出来</p>
<p v-show="hide">show不要显示出来</p>
<p v-if="hide">v-if要显示出来</p>
<p v-else>v-else要显示出来</p>
<!--4.v-for-->
<p v-for="(score,index) in scores">
{{index+':'+score}}
</p>
<p v-for="(d,index) in dog">
{{index+':'+d}}
</p>
</div>
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="js/vue.js" ></script>
<script>
//1.创建Vue的实例
let vm=new Vue({
el:'#app',
data:{
message:'世界，你好！',
msg:'学习',
show:true,
hide:false,
height:1.65,
scores:[100,87,88,80],
dog:{name:'旺财',age:6,heignt:1.2}
}
});
</script>
</body>
</html>
8831
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
