語法
## 插值
### 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>
~~~