一、数据的双向绑定及添加删除等
<div id="app">
{{nickname}}
<input type="text" v-model="nickname"><button @click="add">添加</button>
<ul>
<li v-for="(item,i) in userList">{{i+1}}.{{item}}<button @click="del(i)">删除</button></li>
</ul>
</div>
<script src="../node_modules/vue/dist/vue.min.js"></script>
<script>
new Vue({
el:"#app",
data() {
return {
nickname:'',
userList:[]
}
},
methods:{
add(){
this.userList.push(this.nickname)
this.nickname = ''
},
del(i){
this.userList.splice(i,1)
}
}
})
</script>
二、v-bind 及 过滤器filter的用法示例
<style>
*{
margin: 0;
padding: 0;
}
table{
border-collapse: collapse;
margin: 100px auto;
}
table td,table th{
border: 1px solid #ccc;
text-align: center;
width: 200px;
}
</style>
</head>
<body>
<div id="app">
<table>
<tr>
<th>序号</th>
<th>名称</th>
<th>图片</th>
<th>价格</th>
</tr>
<tr v-for="(item,i) in list">
<td>{{item.id}}</td>
<td><a :href="'detail.html?name='+item.name">{{item.name}}</a></td>
<td><img :src="item.img" :style="{width:'100px',height:'100px'}"></td>
<td>{{item.price | fmtPrice}}</td>
</tr>
</table>
</div>
<script src="../node_modules/vue/dist/vue.min.js"></script>
<script src="../vue-filter.js"></script>
<script>
new Vue({
el:"#app",
data() {
return {
list: [
{
price: 300,
id: 1,
name: 'truman',
img: 'https://bkimg.cdn.bcebos.com/pic/77c6a7efce1b9d16e25dce36fddeb48f8d5464ca?x-bce-process=image/resize,m_lfit,w_500,h_500,limit_1'
},
{
price: 400,
id: 2,
name: 'Andy',
img: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2595383902,1980760291&fm=26&gp=0.jpg'
},
{
price: 500,
id: 3,
name: 'paul',
img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590985109489&di=a0272454e47a8a581823ef95202abc65&imgtype=0&src=http%3A%2F%2Fgss1.bdstatic.com%2F9vo3dSag_xI4khGkpoWK1HF6hhy%2Fbaike%2Fcrop%253D10%252C0%252C138%252C196%253Bh%253D780%253Bq%253D70%2Fsign%3D121a813444a98226ac8e7167b7b3892d%2F58ee3d6d55fbb2fbbac85b53484a20a44723dc94.jpg'
},
]
}
},
methods:{
}
})
</script>
三、Vue中的tab切换
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
display: flex;
}
ul li{
padding: 10px 20px;
margin: 0 10px;
}
ul li.active{
background: red;
color: #fff;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,i) in cityList" :class="{active:i===activeIndex}" @click='activeIndex = i'>{{item}}</li>
</ul>
</div>
<script src="../node_modules/vue/dist/vue.min.js"></script>
<script>
new Vue({
el:"#app",
data() {
return {
activeIndex:0,
cityList:['上海','南京','北京','深圳']
}
},
methods:{
select(i){
this.activeIndex = i
}
}
})
</script>
</body>
四、计算属性computed用法
<body>
<div id="app">
<fieldset>
<legend>男生</legend>
<ul>
<li v-for="item in maleList">{{item.name}} {{item.gender | fmtGender}}</li>
</ul>
</fieldset>
<fieldset>
<legend>女生</legend>
<ul>
<li v-for="item in femaleList">{{item.name}} {{item.gender | fmtGender}}</li>
</ul>
</fieldset>
</div>
<script src="../node_modules/vue/dist/vue.min.js"></script>
<script src="../vue-filter.js"></script>
<script>
new Vue({
el:"#app",
computed: {
maleList(){
return this.userList.filter(r => r.gender)
},
femaleList(){
return this.userList.filter(r => !r.gender)
}
},
data() {
return {
userList:[
{
name:'张三',
gender:1
},
{
name:'李四',
gender:1
},
{
name:'王五',
gender:1
},
{
name:'张三2',
gender:0
},{
name:'李四2',
gender:0
},
{
name:'王五2',
gender:0
}
]
}
},
methods:{
}
})
</script>
</body>
