VUE基本语法
v-if(判断)
<body>
<div id="app">
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
</div>
<script>
var mar=new Vue({
el:"#app",
data:{
ok:true
}
});
</script>
</body>
v-for(循环)
<body>
<div id="app">
<li v-for="item in tems">
{{item.message}}
</li>
</div>
<script>
var mar=new Vue({
el:"#app",
data:{
tems:[
{message:'狂神说JAVA'},
{message:'狂神前端'},
]
}
});
</script>
</body>
vue绑定事件
methods方法
//必须定义在vue的methods对象中,v-on绑定事件
//格式:
<script type="text/javascript" src="vue2.6.14.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="sayHi">按钮</button>
</div>
<script>
var mar=new Vue({
el:"#app",
data:{
message:"牛逼"
},
methods:{
sayHi:function () {
alert(this.message);
}
}
});
</script>
</body>
结果:点击按钮显示
vue双向绑定
<div id="app">
请输入:<input type="text" v-model="message"/>{{message}}
</div>
<script>
var mar=new Vue({
el:"#app",
data:{
message:"123"
}
});
</script>
单选框:radio
<div id="app">
性别:<input type="radio" value="男" v-model="message">男
<input type="radio" value="女" v-model="message">女
<p>
{{message}}
</p>
</div>
<script>
var mar=new Vue({
el:"#app",
data:{
message:""
}
});
</script>
下拉框
<div id="app">
下拉框:
<select name="sel" v-model="message">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<p>
{{message}}
</p>
</div>
<script>
var mar=new Vue({
el:"#app",
data:{
message:""
}
});
</script>