实验1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
请输入1-10：<input type="text" v-model="type" />
<div v-if="type>1&&type<10">
true
</div>
<div v-else>
false
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
type:''
}
})
</script>
</body>
</html>
v-bind 样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
</div>
<script>
new Vue({
el: '#app',
data: {
activeColor: 'green',
fontSize: 50
}
})
</script>
</body>
</html>
实验2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.active1{
width:100px;
height:100px;
background:yellow;
}
.active2{
width:100px;
height:100px;
background:darkred;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="{'active1':isActive,'active2':!isActive}"></div>
<br>
<button v-on:click="isActive=!isActive">点击换色</button>
</div>
<script>
new Vue({
el: '#app',
data: {
isActive:true
}
})
</script>
</body>
</html>
Vue.js 表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>单个复选框：</p>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<p>多个复选框：</p>
<input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
<label for="runoob">Runoob</label>
<input type="checkbox" id="google" value="Google" v-model="checkedNames">
<label for="google">Google</label>
<input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
<label for="taobao">taobao</label>
<br>
<span>选择的值为: {{ checkedNames }}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
checked : false,
checkedNames: []
}
})
</script>
</body>
</html>
实验3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
p{
width: 80%;
margin: 0 auto;
}
input,
select{
display: inline-block;
width: 50%;
height: 25px;
}
select{
height:40px;
}
button{
width: 100px;
background: rgb(41,135,243);
color: white;
}
.err_content li{
color: red;
}
</style>
</head>
<body>
<form id="my_from"@submit="checkFrom">
<div class="err_content"v-if="errMsg.length">
<b>错误提示：</b>
<ul>
<li v-for="err in errMsg">{{err}}</li>
</ul>
</div>
<p>
<label for="user_name">姓名：</label>
<input id="user_name" name="user_name" type="text" v-model="user_name">
</p>
<br>
<p>
<label for="user_age">年龄：</label>
<input
id="user_age"
name="user_age"
type="number"
v-model="user_age"
min="0"
max="100"
>
</p>
<br>
<p>
<label for="user_like">爱好：</label>
<select name="user_like" id="user_like" v-model="user_like">
<option value="0">看书</option>
<option value="1">写代码</option>
<option value="2">看代码</option>
</select>
</p>
<br>
<p>
<button type="submit">提交</button>
</p>
</form>
<script type="text/javascript">
new Vue({
el: '#my_from',
data: function(){
return{
errMsg:[],
user_name:null,
user_age:null,
user_like:null
}
},
methods:{
checkFrom(e){
this.errMsg=[]
if(!this.user_name){
this.errMsg.push('用户名不能为空')
}
if(!this.user_age){
this.errMsg.push('年龄格式错误')
}
if(!this.user_like){
this.errMsg.push('爱好不能为空')
}
if(!this.errMsg.push){
return true
}
e.preventDefault()
}
}
})
</script>
</body>
</html>
121
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
