语法
## 插值
### 1.文本 {{ }}
~~~
{{message}}
~~~
### 二、数据双向绑定
input和节点的数据绑定,当Input的值发生改变的时候,其他地方的值同时改变
~~~
<p>{{message+99}}</p>
<input type="text" v-model='message'>
var vm=new Vue({
el:'#app',
//数据放在data里面,数据形式可以是jason等不同格式
data:{
message:'hello'
}
});
~~~
## 指令
### 三、v-if v-else判断是否加载 ,v-show是否显示
~~~
<p v-show='ok'>v-if判断是否加载,v-show调整css的display属性</p>
~~~
### 四、v-for循环读取data的数据
~~~
<div id="app">
<ul>
<!--
//第一个参数为值,第二个参数为索引
-->
<li v-for="(aa,index) in st2">
{{index}}----{{aa.name}}----{{aa.value}}
</li>
</ul>
<hr>
<ul>
<li v-for="bb in devstu">
{{bb}}
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
student: [2, 4, 6, 8, 33],
st2:[
{name:'tabao',value:'444'},
{name:'taba33o',value:'444444'},
]
},
//对data数据计算,字段computed,此处为排序
computed:{
devstu:function(){
return this.student.sort();
}
}
});
//自定义JS函数
function mysort(){
//#code
}
</script>
~~~