03-Vue常用指令(二)
2018-08-29 本文已影响0人
乔乔_老师
一、Vue常用指令
- v-once 也是双向数据绑定，但数据只绑定一次
- v-pre 原样输出
- v-bind 绑定属性 v-bind:属性='值'
- v-text 单向数据绑定，不可识别标签
- v-html 单向数据绑定,可以识别标签
1.v-once数据只绑定一次
<body>
<div id='itany'>
<input type="text" name="" v-model='msg'>
<p>{{msg}}</p>
<p v-once>{{msg}}</p>
</div>
<script src='js/vue.js'></script>
<script type="text/javascript">
new Vue({
el:'#itany',
data:{
msg:'welcom to vue'
}
})
</script>
使用v-once绑定的元素中的内容不会随着input中输入的内容变化而变化，始终保持最初始的样子
2.v-pre原样输出
<body>
<div id='itany'>
<input type="text" name="" v-model='msg'>
<p v-pre>{{msg}}</p>
</div>
<script src='js/vue.js'></script>
<script type="text/javascript">
new Vue({
el:'#itany',
data:{
msg:''
}
})
</script>
</body>
使用v-pre的标签之间的内容不会进行编译，而是两标签之间写什么就会输出什么
3.v-bind：绑定属性
<body>
<div id='itany'>
<img v-bind:src="url">
<img :src="url">//简写
</div>
<script src='js/vue.js'></script>
<script type="text/javascript">
new Vue({
el:'#itany',
data:{
url:'img/1.jpg'
}
})
</script>
</body>
v-bind绑定属性，v-bind:属性名=‘值’，也可以省略v-bind,直接在属性前面加冒号:, :属性名=‘值’
4.绑定class属性：绑定class属性一般使用json的方式
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.aaa{
color:red;
}
.bbb{
background:blue;
}
</style>
</head>
<body>
<div id='itany'>
//绑定属性
<p v-bind:class={aaa:true,bbb:true}>hello vue.js</p>
</div>
<script src='js/vue.js'></script>
<script type="text/javascript">
new Vue({
el:'#itany',
data:{
url:'img/1.jpg'
}
})
</script>
</body>
我们想使用哪个属性就设置哪个属性为true就可以了，如果不想使用哪个属性，那设置它的值为false就可以了
5.v-text / v-html 单向数据绑定
<body>
<div id='itany'>
<input type="text" name="" v-model='msg'>
<p v-text='msg'>{{msg}}</p>
<p v-html='msg'>{{msg}}</p>
</div>
<script src='js/vue.js'></script>
<script type="text/javascript">
new Vue({
el:'#itany',
data:{
msg:'scsa'
}
})
</script>
</body>
单向数据绑定有两种方式
方式一：使用v-text v-html
方式二：使用两对大括号{{}},可能会出现闪烁问题，可以使用v-cloak解决
v-cloak
<body>
<div id='itany'>
<p>{{msg}}</p>
</div>
<script src='js/vue.js'></script>
<script type="text/javascript">
new Vue({
el:'#itany',
data:{
msg:"hello vue"
},
created:function(){
alert(111)
}
})
</script>
</body>
如果我们想在vue实例创建的时候，执行一段代码，然后再把msg编译到页面上，但是我们会发现在执行声明周期中的东西是，msg还没有被编译完也会原样输出(有兼容性问题，建议多个浏览器去测试)，为了不让这种情况出现，我们必须使用v-cloak
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
[v-cloak]{//属性选择器，使用v-cloak必须加上这个样式
display: none;
}
</style>
</head>
<body>
<div id='itany'>
<p v-cloak>{{msg}}</p>
</div>
<script src='js/vue.js'></script>
<script type="text/javascript">
new Vue({
el:'#itany',
data:{
msg:"hello vue"
},
created:function(){
alert(111)
}
})
</script>
</body>
</html>
6.练习：完成如下图所示的购物车练习
1.png
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>购物车</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<div id='itany'>
<h1>总价:￥{{total}}</h1>
<table class='table table-bordered table-straped text-center'>
<thead>
<tr>
<th class='text-center'>编号</th>
<th class='text-center'>名称</th>
<th class='text-center'>单价</th>
<th class='text-center'>数量</th>
<th class='text-center'>总价</th>
</tr>
</thead>
<tbody>
<tr v-for="(val,index) in fruitList">
<td>{{index+1}}</td>
<td>{{val.name}}</td>
<td>{{val.price}}</td>
<td>
<button @click='add(index)'>+</button>
<span>{{val.num}}</span>
<button @click='redu(index)'>-</button>
</td>
<td>{{val.sub}}</td>
</tr>
</tbody>
</table>
</div>
<script src='js/vue.js'></script>
<script type="text/javascript">
new Vue({
el:'#itany',
data:{
fruitList:[
{name:'香蕉',price:2.5,num:2,sub:5},
{name:'苹果',price:3.5,num:3,sub:10.5},
{name:'鸭梨',price:4.5,num:4,sub:18}
],
total:0
},
methods:{
add:function(index){
this.fruitList[index].num++;
this.fruitList[index].sub=Number(this.fruitList[index].num)*Number(this.fruitList[index].price);
//调用总价
this.toal(index);
},
redu:function(index){
if(this.fruitList[index].num>1){
this.fruitList[index].num--;
this.fruitList[index].sub=Number(this.fruitList[index].num)*Number(this.fruitList[index].price);
}
//调用总价
this.toal();
},
toal:function(){
for(var i=0,sum=0;i<this.fruitList.length;i++){
sum+=this.fruitList[i].sub;
this.total=sum.toFixed(2);
}
}
}
})
</script>
</body>
</html>
