标签：调用 方式 idt click function phone 绑定 isp 简写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.bg{
background-color:blue ;
width: 100px;
height: 100px;
}
.box{border: 1px red solid;}
</style>
</head>
<body>
<!--vue只能接管一个div-->
<div id="app">
<!-- 模板语言-->
<!-- {{msg}}--{{count+1}}-->
<!-- v-on:绑定事件 -->
<!-- v-on是全写方式，@是简写方式-->
<!-- 调用方法-->
<!-- <input type="button" @click="login" value="登录">-->
<!-- <input type="button" v-on:click="login" value="登录">-->
<!--v-bind:写在属性上-->
<!-- 只写{{url}}，不加v-bind，不会跳转到url-->
<!-- <a v-bind:href="url">{{url}}</a>-->
<!-- []代表要引用style样式-->
<!-- :是v-bind的简写-->
<!-- <div :class="classes"></div>-->
<!-- <div :class="{bg:is_bg,box:is_box}"></div>-->
<!-- <input type="button" value="changeClass" @click="changeClass">-->
<!-- v-if v-else-if v-else -->
<!-- <span v-if="phoneNumber==10086">移动公司</span>-->
<!-- <span v-else-if="phoneNumber==10010">联通公司</span>-->
<!-- <span v-else>电信公司</span>-->
<!-- v-show-->
<!-- v-show和v-if的区别： v-show:如果条件为fasle则对标签增加display=none
v-if:只有符合条件的元素才加载-->
<!-- <span v-show="phoneNumber==10086">移动公司</span>-->
<!-- v-for循环list,写在哪个标签上就循环哪个标签-->
<!-- <ul>-->
<!-- <li v-for="(game,index) in games" >{{game}}--{{index+1}}</li>-->
<!-- </ul>-->
<!--v-for map-->
<!-- <ul>-->
<!-- <li v-for="(value,key) in games">{{key}}--{{value}}</li>-->
<!-- </ul>-->
<!-- v-for list+map-->
<ul>
<li v-for="game in games">{{game.name}}</li>
<!-- 字典取值game.name-->
</ul>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
// 接管的标签
el:‘#app‘,
//数据源
data:{
msg:‘test‘,
count:0,
url:‘http://www.baidu.com‘,
classes:[‘bg‘,‘box‘],
is_bg:true,
is_box:true,
phoneNumber:10086,
// games:[‘绝地求生‘,‘英雄联盟‘,‘王者荣耀‘]
games:[{‘name‘:‘绝地求生‘},{‘name‘:‘蓝洞‘}]
},
//用于存储整个vue所有的方法
methods:{
login:function () {
//this代表vue的实例对象，直接到data下面找msg
// alert(this.msg)
//通过this.msg改变data里面msg的值
this.msg=‘change msg‘
},
changeClass:function () {
this.classes=[‘box‘]
}
}
})
</script>
</body>
</html>
标签：调用 方式 idt click function phone 绑定 isp 简写
原文地址：https://www.cnblogs.com/liulilitoday/p/13334528.html
