指令
1、条件判断
v-if v-else v-show
- v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载。
- v-show：调整css dispaly属性，可以使客户端操作更加流畅。
2、循环
v-for
数字排序
<div id="app">
<ul>
<li v-for="item in items">
{{item}}
</li>
</ul>
</div>
<script>
var app= new Vue({
el:'#app',
data:{
items:[20,23,18,65,32,19,54,56,41]
}
})
</script>
对象形式的排序
<div id="app">
<ul>
<li v-for="(student,index) in sortStudents">
{{index}}--{{student.name}}--{{student.age}}
</li>
</ul>
</div>
<script>
var app= new Vue({
el:'#app',
data:{
students:[
{name:'jspang',age:32},
{name:'Panda',age:30},
{name:'PanPaN',age:21},
{name:'King',age:45}
]
},
computed:{
sortStudents:function(){
return sortByKey(this.students,'age');
}
}
})
//数组对象方法排序:
function sortByKey(array,key){
return array.sort(function(a,b){
var x=a[key];
var y=b[key];
return ((x<y)?-1:((x>y)?1:0));
});
}
</script>
3、v-text v-html
我们已经会在html中输出data中的值了，我们已经用的是{{xxx}},这种情况是有弊端的，就是当我们网速很慢或者javascript出错时，会暴露我们的{{xxx}}。Vue给我们提供的v-text,就是解决这个问题的。
如果在javascript中写有html标签，用v-text是输出不出来的，这时候我们就需要用v-html标签了。
双大括号会将数据解释为纯文本，而非HTML。为了输出真正的HTML，你就需要使用v-html 指令。 需要注意的是：在生产环境中动态渲染HTML是非常危险的，因为容易导致XSS攻击。所以只能在可信的内容上使用v-html，永远不要在用户提交和可操作的网页上使用。
4、v-on：绑定事件监听器
v-on 就是监听事件，可以用v-on指令监听DOM事件来触发一些javascript代码。
键盘回车事件v-on:keyup.enter
5、v-model 双向数据绑定
常用于表单
修饰符
- .lazy：取代 imput 监听 change 事件。
- .number：输入字符串转为数字。 先输入数字才有效
- .trim：输入去掉首尾空格。
1、绑定文本框
<input type="text" v-model="message">
2、绑定文本域
<textarea name="" id="" cols="30" rows="10" v-model="message">
3、多选框绑定一个值
<input type="checkbox" id="isture" v-model="isTrue">
<label for="isture">{{isTrue}}</label>
image.png
4、多选框绑定数组
<input type="checkbox" id="JSPang" value="JSPang" v-model="web_Names">
<label for="JSPang">JSPang</label><br/>
<input type="checkbox" id="Panda" value="Panda" v-model="web_Names">
<label for="JSPang">Panda</label><br/>
<input type="checkbox" id="PanPan" value="PanPan" v-model="web_Names">
<label for="JSPang">PanPan</label>
<p>{{web_Names}}</p>
ZC2LDGS2B%%C9R0GD0T$(@4.png
5、单选框的绑定
<label for="">
男
<input type="radio" id="one" value="男" v-model="sex">
</label>
<label for="">
女
<input type="radio" id="two" value="女" v-model="sex">
</label>
<p>你选择的性别是{{sex}}</p>
data:{
message:"hello world",
isTrue:true,
web_Names:[],
sex:'男'
}
QQ图片20200806171441.png
6、v-bind 常用于绑定属性
v-bind是处理HTML中的标签属性的
<div id="app">
<img v-bind:src="imgSrc" width="200px">
<hr>
<!-- 1、直接绑定class样式 -->
<div :class="className">1、绑定class</div>
<!-- 2、绑定classA并进行判断，在isOK为true时显示样式，在isOk为false时不显示样式。 -->
<div :class="{classA:isOK}">2、绑定class</div>
<!-- 3、绑定class中的数组 -->
<div :class="[classA,classB]">3、绑定class中的判断</div>
<!-- 4、绑定class中使用三元表达式判断 -->
<div :class="isOK?classA:classB">4、绑定class中的判断</div>
<hr>
<div>
<input type="checkbox" id="PanPan" value="PanPan" v-model="isOK">
<label for="JSPang">isOk={{isOK}}</label>
</div>
<!-- 5、绑定style-->
<div :style="{color:red,fontSize:font}">5、绑定</div>
<!-- 6、用对象绑定style样式 -->
<div :style="styleObject">6、绑定</div>
</div>
<style>
.classA{
color: red;
}
.classB{
font-size: 48px;
}
</style>
<script>
var app = new Vue({
el: '#app',
data: {
imgSrc: 'https://i0.hdslb.com/bfs/sycp/creative_img/202007/518e7372b19fc0dd0c51931d4c459a45.jpg',
className:'classA',
isOK:false,
classA:'classA',
classB:'classB',
red:'red',
font:"20px",
styleObject:{
color:'green',
fontSize:'24px'
}
}
})
</script>
7、 其他内部指令(v-pre & v-cloak & v-once)]
v-pre指令
在模板中跳过vue的编译，直接输出原始值。就是在标签中加入v-pre就不会输出vue中的data值了。
<div v-pre>{{message}}</div>
这时并不会输出我们的message值，而是直接在网页中显示{{message}}
v-cloak指令
防止页面闪烁
在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用，
[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div>
v-once指令
在第一次DOM时进行渲染，渲染完成后视为静态内容，跳出以后的渲染过程。
<div id="app">
<!-- 原样输出 -->
<div v-pre>{{message}}</div>
<div v-clock>渲染完成后，才显示！</div>
<div v-once>{{message}}</div>
<div>
<input type="text" v-model="message">
</div>
</div>
<script>
var app= new Vue({
el:'#app',
data:{
message:"hello world"
}
})
</script>
网友评论