<body>
<div id="app">
<span>{{msg}}</span>
<!-- 修改数据源按钮 v-on用于绑定事件,简写方式可以用@符号代替v-on-->
<input type="button" v-on:click="change" value="修改">
<!-- 三元运算，如果flag等于true则显示男生否则显示女生-->
<div>{{flag?'男生':'女生'}}</div>
<!-- vue还可以进行加减操作-->
<div>{{num+1}}</div>
<!-- v-bind用于绑定标签属性，简写方式可以直接在href前加上:就可以-->
<a v-bind:href="a_href">跳转</a>
<!-- 循环数组与角标-->
<div v-for="(item,index) in games">{{item}}--{{index}}</div>
<!-- 循环value与key-->
<div v-for="(item,key) in dict_games">{{item}}--{{key}}</div>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
// 修改数据源之前
data:{
msg:'hi,vue!',
flag:true,
num:1,
a_href:'http://www.baidu.com'
games:['绝地求生','英雄联盟','王者荣耀'],
dict_games:{'name':'绝地求生','company':'蓝洞'}
},
// 修改数据源之后
methods:{
change(){
this.flag = false;
this.msg = '哈哈哈哈哈哈哈'
this.a_href = 'http://www.taobao.com'
}
}
})
</script>
</body>
v-if与v-show的区别
<span v-if="number==10086">移动</span>
<span v-else-if="number==10010">联通</span>
<span v-else>电信</span>
<span v-show="number==10086">v-show-移动</span>
<span v-show="number==10010">v-show-联通</span>
注：v-if是判断条件走到哪行展示哪行，v-show是标签全部展示，但是不成立的标签用dispaly:none隐藏