条件渲染v-if,v-else-if,v-else:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/js/vue.js"></script>
</head>
<body>
<div id="app">
<div v-if="score>90&&score<100">优秀</div>
<div v-else-if="score>80&&score<=90">良好</div>
<div v-else-if="score>60&&score<=80">及格</div>
<div v-else>不及格</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
score: 60
},
methods: {},
})
</script>
</body>
</html>
列表渲染：v-for的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/js/vue.js"></script>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-lg-offset-3">
<h1 class="text-center">购物车</h1>
<div class="pull-right">
<button class="btn-success btn" @click="hans">点我看看</button>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>序号</th>
<th>商品名</th>
<th>价格</th>
<th>数量</th>
</tr>
</thead>
<tbody>
<tr v-for="good in good_list">
<td>{{good.id}}</td>
<td>{{good.name}}</td>
<td>{{good.price}}</td>
<td>{{good.count}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
good_list:[]
},
methods:{
hans(){
this.good_list=[ {'id':1,'name':'汽车','price':100000,'count':5},
{'id':2,'name':'火车','price':10000,'count':2},
{'id':3,'name':'机动车','price':500000,'count':1},
{'id':4,'name':'三轮车','price':1000,'count':0},
{'id':5,'name':'摩托车','price':10500,'count':10},
{'id':6,'name':'自行车','price':1100,'count':20},]
}
}
})
</script>
</body>
</html>
v-for循环其他数据类型：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/js/vue.js"></script>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<div id="app">
<h1>循环数字</h1>
<ul>
<li v-for="i in number">{{i}}</li>
</ul>
<h1>循环字符串</h1>
<ul>
<li v-for="i in str">{{i}}</li>
</ul>
<h1>循环数组</h1>
<ul>
<li v-for="i in arr">{{i}}</li>
</ul>
<h1>循环对象</h1>
<ul>
<li v-for="(value,key) in obj">{{key}}-------------{{value}}</li>
</ul>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{number:10,
str:'hello world',
arr:[5,4,8,4,7,6,8,4],
obj:{'name':'ydh','age':18}
},
methods:{}
})
</script>
</body>
</html>
双向数据绑定：v-model
只有input框------------->v-model做双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/js/vue.js"></script>
</head>
<body>
<div id="app">
<p>用户名<input type="text" v-model="username"></p>
<p>密码<input type="password" v-model="password"></p>
<button @click="hans">提交</button>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
username:'',
password:''
},
methods:{
hans(){
console.log(this.username)
console.log(this.password)
}
}
})
</script>
</body>
</html>
事件处理：
input标签的事件
-input：只要输入内容，就会触发
-change：只要输入框发生变化，就会触发
-blur：只要失去焦点，就会触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>input事件</h1>
用户名：<input type="text" @input="hans" v-model="username">
<h1>change事件</h1>
用户名：<input type="text" @change="hanchange" v-model="username1">
<h1>blur事件</h1>
用户名：<input type="text" @blur="hanblur" v-model="username2">
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
username:'',
username1:'',
username2:'',
},
methods:{
hans(){
console.log(this.username)
},
hanchange(){
console.log(this.username1)
},
hanblur(){
console.log(this.username2)
}
}
})
</script>
</body>
</html>
checkbox单选和多选，radio单选：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>checkbox单选</h1>
<p>用户名：<input type="text" v-model="username"></p>
<p>密码：<input type="password" v-model="password"></p>
<p>记住密码：<input type="checkbox" v-model="remeber"></p>
<p>
篮球<input type="checkbox" v-model="hobby">
足球：<input type="checkbox" v-model="hobby">
乒乓球：<input type="checkbox" v-model="hobby">
</p>
<p>性别：
男：<input type="radio" v-model="gender" value="1">
女：<input type="radio" v-model="gender" value="2">
</p>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
username:'',
password:'',
remeber:true,
hobby:[],
gender:'',
},
methods:{}
})
</script>
</body>
</html>
标签：count,事件处理,good,name,渲染,price,Title,单选,id From： https://www.cnblogs.com/Hao12345/p/17458765.html