- v-pre 令vue语法失效
<div id="app">
<div>
<!-- v-pre 用于标签内,作用:使vue渲染失效-->
<h3 v-pre>{{title}}</h3>
</div>
</div>
<script>
var app = new Vue({
el:'#app',
data : {
title:"请添加产品",
man:{
name:'坤坤',
age:'21'
}
} ,
});
</script>
页面效果如下:
2.v-once 元素只渲染一次
<div id="app">
<ul>
<li v-for="(item,index) in users" v-once>
{{index}}--{{key}}--{{value}}
</li>
</ul>
</div>
<script>
var app = new Vue({
el:'#app',
data : {
users:[
{name:'zs',age:18,sex:'男'},
{name:'ls',age:20,sex:'男'},
{name:'ww',age:19,sex:'男'}
],
} ,
});
</script>
页面效果如下:
3.v-text 设置元素的文本
<div id="app">
{{ woman.name }}是一个{{woman.age>=18?'成年人':'未成年人'}}</br>
<span v-text="woman.name"></span>是一个{{woman.age>=18?'成年人':'未成年人'}}
</div>
<script>
var app=new Vue({
el:'#app',
data:{
woman:{
name:'坤坤',
age:'50'
},
}
})
</script>
页面效果如下:
4.v-html 设置元素的innerHTML:
<div id="app">
<h2 v-html="man10"></h2>
</div>
<script>
var app=new Vue({
el:'#app',
data:{
},
man10:'<span style="color:green">未年人</span>',
}
})
</script>
页面效果如下:
5.v-if 根据条件渲染数据(v-if相比于v-show源代码不可见,重要代码用v-if):
<div id="app">
<div v-for="(item, index) in woman" :key="index" v-if="item.age<18">
{{item.name}}是<span v-html="man10"></span>
</div>
</div>
<script>
var app=new Vue({
el:'#app',
data:{
woman:[
{
name:'坤坤',
age:'17'
},
{
name:'坤坤2',
age:'20'
},
],
man10:'<span style="color:green">未年人</span>',
}
})
</script>
页面效果如下:
6.v-else 双分支:
<div id="app">
<div v-if="woman.age<18">
<span v-html="man10"></span>
</div>
<div v-else>
<span v-html="man50"></span>
</div>
</div>
<script>
var app=new Vue({
el:'#app',
data:{
woman:{
name:'坤坤',
age:'50'
},
man50:'<span style="color:green">老年人</span>',
man10:'<span style="color:green">未年人</span>',
}
})
</script>
页面效果如下:
7.v-else-if 多分支:
<div id="app">
<div v-if="woman.age<18">
<span v-html="man10"></span>
</div>
<div v-else-if="woman.age>=18&&woman.age<40">
<span v-html="man18"></span>
</div>
<div v-else>
<span v-html="man50"></span>
</div>
</div>
<script>
var app=new Vue({
el:'#app',
data:{
woman:{
name:'坤坤',
age:'50'
},
man50:'<span style="color:green">老年人</span>',
man18:'<span style="color:green">中年人</span>',
man10:'<span style="color:green">未年人</span>',
}
})
</script>
页面效果如下:
8.v-show 设置元素的display属性值(v-show相当于css中的style="display:none;"隐藏数据,但是源代码可见,不能放重要代码):
<div id="app">
<h2>上联:世上再无小坤坤,无人唱跳加rap</h2>
<h2 v-show="ok">下联:世上再无马保国,无人闪电五连鞭</h2>
<!--v-show相当于css中的style="display:none;"隐藏数据,但是源代码可见,不能放重要代码-->
<h2 v-if="ok">作者:杰哥</h2><!--v-if源代码不可见,重要代码用v-if-->
<button id="ha" data-name="xianshi" v-on:click="showBtn">点我显示下联</button>
<button @click="showBtn2">点我隐藏</button>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
ok:false
},
methods: {
showBtn(){
this.ok=!this.ok;
//event.target.innerText="被点击了。" 改变目标标签文本
//event.target.hidden=true 隐藏目标功能
//event.target.disabled=true 功能变成不可用
},
showBtn2(){
this.ok=false;
//event.target.innerText="被点击了。" 改变目标标签文本
//event.target.hidden=true 隐藏目标功能
//event.target.disabled=true 功能变成不可用
}
},
});
</script>
页面效果如下:
v-show设置的初始值为false所以隐藏内容
点击按钮可显示隐藏内容,将v-show设置的值取反
点击按钮让v-show设置的值为false
9.v-on:click 鼠标左键点击事件(简写:@click):
<div id="app">
<h2>{{text}}</h2><br>
<button @click="btn">点我</button>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
text:'',
},
methods: {
btn(){
this.text='坤坤';
},
},
});
</script>
页面效果如下:
10.console.log() 打印日志:
<div id="app">
<h2>上联:世上再无小坤坤,无人唱跳加rap</h2>
<h2 v-show="ok">下联:世上再无马保国,无人闪电五连鞭</h2>
<h2 v-if="ok">作者:杰哥</h2>
<button id="ha" data-name="xianshi" v-on:click="showBtn(5,$event)">点我显示下联</button><!--showBtn(5,$event)中 $event传递该数据的所有信息-->
<button @click="showBtn2">点我隐藏</button>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
ok:false,
},
methods: {
showBtn(num,event){
console.log(event)//打印日志 输出该数据的所有信息
this.ok=!this.ok;
//event.target.innerText="被点击了。" 改变目标标签文本
//event.target.hidden=true 隐藏目标功能
//event.target.disabled=true 功能变成不可用
},
showBtn2(){
this.ok=false;
}
},
});
</script>
页面效果如下:
//event.target.innerText="被点击了。" 改变目标标签文本
//event.target.hidden=true 隐藏目标
//event.target.disabled=true 功能变成不可用
11.v-bind:设置html原生的值:
<div id="app">
<!-- v-bind简写就是在属性前加 : ,如 :value,:disabled,:checked-->
<input type="text" :value="name">
</div>
<script>
var app=new Vue({
el:'#app',
data:{
name:'坤坤',
}
});
</script>
页面如下:
12.v-for-arry:遍历数组(v-for="(item,index) in 数组名"):
<div id="app">
<ul>
<li v-for="(item, index) in users">
{{index}}--{{item.name}}--{{item.age}}
</li>
</ul>
</div>
<script>
var app=new Vue({
el:'#app',
data:{
users:[
{
name:'zs',
age:18,
},
{
name:'ls',
age:20,
},
{
name:'ww',
age:22,
},
],
}
});
</script>
页面如下:
13.v-for-obj:遍历对象:
<div id="app">
<ul>
<li v-for="(value, key) in users" :key="key">
{{key}}--{{value}}
</li>
</ul>
</div>
<script>
var app=new Vue({
el:'#app',
data:{
users:[
{
name:'zs',
age:18,
},
{
name:'ls',
age:20,
},
{
name:'ww',
age:22,
},
],
}
});
</script>
页面如下:
14.v-model(语法糖,在表单控件或者组件上创建双向绑定):
<div id="app">
<input type="checkbox" value="a" v-model="checkedNames">
<label for="one">A</label>
<input type="checkbox" value="b" v-model="checkedNames">
<label for="two">B</label>
<input type="checkbox" value="c" v-model="checkedNames">
<label for="three">C</label>
<br>
<span>选中的按钮: {{ checkedNames }}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
checkedNames: []
}
})
</script>
页面效果如下: