## VUE.js 极简小例：数值计算、千米换算为米、九九乘法表、循环

``````<template>
<div id="app">

<!-- 千米和米换算 -->
<div id = "computed_props">
<input type = "text" v-model = "kilometers"> 千米=
<input type = "text" v-model = "meters">米
</div>
<p id="info"></p>
<br/>

<!-- 数值计算 -->
<p>计数器: {{ counter }}</p>
<button @click = "counter +=2">点一下就自增2</button>
<br/> <br/>  <br/>

<!-- 九九乘法表 -->
<div v-for="n in 9" :key="n" style = "font-size:25px; color:green">
<b v-for="m in n" :key="m">
{{m}}*{{n}}={{m*n}}
</b>
</div>
<br/> <br/>

<!-- 整数范围内迭代 -->
<!-- <li v-for="n in 10" :key="n"> -->
<!-- 数组迭代 -->
<li v-for="n in [1,3,5]" :key="n">
{{ n }}
</li>

<br/> <br/>
<!-- 迭代对象属性 键值对 -->
<ul>
<li v-for="(value, key) in 小熊" :key="value">
{{ key }} : {{ value }}
</li>
</ul>

<br/> <br/>
<!-- 迭代对象属性 -->
<ul>
<li v-for="value in 小熊" :key="value">
{{ value }}
</li>
</ul>

<br/> <br/>
<!-- 第三个参数为索引 -->
<ul>
<li v-for="(value, key, index) in 小熊"  :key="value">
{{ index }}. {{ key }} : {{ value }}
</li>
</ul>

<br/> <br/>
<!-- 带模板的循环 -->
<ul  v-for="site in sites" :key="site">
<li>{{ site.name }}</li>
<li>--------------</li>
</ul>

<br/> <br/>
<!-- 简单循环 -->
<ol>
<li v-for="site in sites" :key="site">
{{ site.name }}
</li>
</ol>

<!-- 根据ok的值确定是否显示数据 -->
<div v-show="ok">为true就显示</div>

<br/>
<!-- 多条件判断 -->
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>

</div>
</template>

<script>

export default {
name: 'app',
data () {
return {
kilometers : 0,
meters:0,
counter: 1,
type: 'A',
ok:false,
sites: [
{ name: '文文乐园' },
{ name: '怕血的小蚊子' },
{ name: '火魔灭世' }
],
小熊: {
昵称: '微风轻许',
网址: 'https://blog.csdn.net/jiangyu1013',
描述: '我的日常笔记'
}
}
},
watch : {
kilometers:function(val) {
this.kilometers = val;
this.meters = val * 1000;
},
meters : function (val) {
this.kilometers = val/ 1000;
this.meters = val;
}
}
}

</script>
``````