Vue指令

最新推荐文章于 2023-04-13 23:14:01 发布

一梦醉殇

最新推荐文章于 2023-04-13 23:14:01 发布

阅读量179

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_37121733/article/details/79697056

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue指令</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
1、v-model双向绑定数据
<div id="app-1">
<p>{{message}}</p>
<input v-model="message">
</div>
<pre style="font-size: 18px;font-weight: bold;color: #373636;background-color: #51A5FC;padding: 15px 0px;">
<div id="app-1">
<p>{{message}}</p>
<input v-model="message">
</div>
<script type="text/javascript">
var app1 = new Vue({
el:'#app-1',
data:{
message:'梅花香自苦寒来'
}
})
</script>
</pre>
<br>++++++++++++++++++++++++++++++<br><br>
<script type="text/javascript">
var app1 = new Vue({
el:'#app-1',
data:{
message:'梅花香自苦寒来'
}
})
</script>

2、v-show 显示与隐藏
<div id="app-2">
<input type="button" value="toggle" v-on:click="toggle()"><br>
<div v-show="isShow" style="width: 100px;height: 100px;background: #0970D9;"></div>
</div>
<pre style="font-size: 18px;font-weight: bold;color: #373636;background-color: #51A5FC;padding: 15px 0px;">
<div id="app-2">
<input type="button" value="toggle" v-on:click="toggle()"><br>
<div v-show="isShow" style="width: 100px;height: 100px;background: #0970D9;"></div>
</div>
<script type="text/javascript">
var app2 = new Vue({
el:'#app-2',
data:{
isShow:false,
},
methods:{
toggle:function(){
this.isShow = !this.isShow;
}
}
});
</script>
</pre>
<br>++++++++++++++++++++++++++++++<br><br>
<script type="text/javascript">
var app2 = new Vue({
el:'#app-2',
data:{
isShow:false,
},
methods:{
toggle:function(){
this.isShow = !this.isShow;
}
}
});
</script>

3、v-for循环
<div id="app-3">
<ul>

<li v-for="item in arr">
<span>{{item.name}}</span>
<span>{{item.age}}</span>
<span>{{item.sex}}</span>
</li>
</ul>
</div>
<pre style="font-size: 18px;font-weight: bold;color: #373636;background-color: #51A5FC;padding: 15px 0px;">
<div id="app-3">
<ul>

<li v-for="item in arr">
<span>{{item.name}}</span>
<span>{{item.age}}</span>
<span>{{item.sex}}</span>
</li>
</ul>
</div>
<script type="text/javascript">
var app3 = new Vue({
el:'#app-3',
data:{
arr:[
{"name":"小明","age":12,"sex":"男"},
{"name":"小红","age":14,"sex":"女"},
{"name":"小三","age":10,"sex":"男"},
{"name":"小四","age":19,"sex":"女"}
]
}
})
</script>
</pre>
<br>++++++++++++++++++++++++++++++<br><br>
<script type="text/javascript">
var app3 = new Vue({
el:'#app-3',
data:{
arr:[
{"name":"小明","age":12,"sex":"男"},
{"name":"小红","age":14,"sex":"女"},
{"name":"小三","age":10,"sex":"男"},
{"name":"小四","age":19,"sex":"女"}
]
}
})
</script>

4、v-if条件渲染
<div id="app-4">
<span v-if="flag">
如果flag为true则显示,false不显示!
</span>
</div>
<pre style="font-size: 18px;font-weight: bold;color: #373636;background-color: #51A5FC;padding: 15px 0px;">
<div id="app-4">
<span v-if="flag">
如果flag为true则显示,false不显示!
</span>
</div>
<script type="text/javascript">
var app4 = new Vue({
el:'#app-4',
data:{
flag:true
}
})
</script>
</pre>
<br>++++++++++++++++++++++++++++++<br><br>
<script type="text/javascript">
var app4 = new Vue({
el:'#app-4',
data:{
flag:true
}
})
</script>

5、v-else 必须和v-if连用
<div id="app-5">
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>
<div v-if="num==10">
num = {{num}}
</div>
<div v-else>
num != 10
</div>
</div>
<pre style="font-size: 18px;font-weight: bold;color: #373636;background-color: #51A5FC;padding: 15px 0px;">
<div id="app-5">
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>
<div v-if="num==10">
num = {{num}}
</div>
<div v-else>
num != 10
</div>
</div>
<script type="text/javascript">
var app5 = new Vue({
el:'#app-5',
data:{
num:10
}
})
</script>
</pre>
<br>++++++++++++++++++++++++++++++<br><br>
<script type="text/javascript">
var app5 = new Vue({
el:'#app-5',
data:{
num:10
}
})
</script>

6、v-else-if 必须和v-if连用
<div id="app-6">
{{message}}
<div v-if="message==='A'">
str = {{message}}
</div>
<div v-else-if="message==='B'">
str = {{message}}
</div>
<div v-else-if="message==='C'">
str = {{message}}
</div>
<div v-else>
str = null
</div>
</div>
<pre style="font-size: 18px;font-weight: bold;color: #373636;background-color: #51A5FC;padding: 15px 0px;">
<div id="app-6">
{{message}}
<div v-if="message==='A'">
str = {{message}}
</div>
<div v-else-if="message==='B'">
str = {{message}}
</div>
<div v-else-if="message==='C'">
str = {{message}}
</div>
<div v-else>
str = null
</div>
</div>
<script type="text/javascript">
var app6 = new Vue({
el:'#app-6',
data:{
message: 'B'
}
})
</script>
</pre>
<br>++++++++++++++++++++++++++++++<br><br>
<script type="text/javascript">
var app6 = new Vue({
el:'#app-6',
data:{
message: 'B'
}
})
</script>

7、v-bind 动态绑定作用：及时对页面的数据进行更改
<div id="app-7">

<p v-bind:title="message">
鼠标悬停几秒，可看到此处动态绑定的title！
</p>
<a v-bind:href="url" target="_blank">v-bind链接</a>
</div>
<pre style="font-size: 18px;font-weight: bold;color: #373636;background-color: #51A5FC;padding: 15px 0px;">
<div id="app-7">

<p v-bind:title="message">
鼠标悬停几秒，可看到此处动态绑定的title！
</p>
<a v-bind:href="url" target="_blank">v-bind链接</a>
</div>
<script type="text/javascript">
var app7 = new Vue({
el:'#app-7',
data:{
message:'页面加载于' + new Date().toLocaleString(),
url:'http://cn.vuejs.org/'
}
})
</script>
</pre>
<br>++++++++++++++++++++++++++++++<br><br>
<script type="text/javascript">
var app7 = new Vue({
    el:'#app-7',
    data:{
      message:'页面加载于' + new Date().toLocaleString(),
      url:'http://cn.vuejs.org/'
    }
    })
</script>

8、v-on 绑定事件函数必须写在methods里面
<div id="app-8">
<p>{{message}}</p>
<button V-on:click="reverseMessage">翻转message</button>
</div>
<pre style="font-size: 18px;font-weight: bold;color: #373636;background-color: #51A5FC;padding: 15px 0px;">
<div id="app-8">
<p>{{message}}</p>
<button V-on:click="reverseMessage">翻转message</button>
</div>
<script type="text/javascript">
var app8 = new Vue({
el:'#app-8',
data:{
message:'桃花庵里桃花仙，桃花仙人种桃树'
},
methods:{
reverseMessage:function(){
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
</pre>
<br>++++++++++++++++++++++++++++++<br><br>
<script type="text/javascript">
var app8 = new Vue({
    el:'#app-8',
    data:{
message:'桃花庵里桃花仙，桃花仙人种桃树'
},
methods:{
reverseMessage:function(){
this.message = this.message.split('').reverse().join('')
}
}
    })
</script>

9、v-text 解析文本
<div id="app-9">
<p>{{msg}}</p>
<p v-text="msg1"></p> 
<p v-text="msg2"></p> 
</div>
<pre style="font-size: 18px;font-weight: bold;color: #373636;background-color: #51A5FC;padding: 15px 0px;">
<div id="app-9">
<p>{{msg}}</p>
<p v-text="msg1"></p> 
<p v-text="msg2"></p> 
</div>
<script type="text/javascript">
var app9 = new Vue({
el:'#app-9',
data:{
msg:'这个是{{msg}}的输出',
msg1:'v-text文本输出',
msg2:'<strong>welcome</strong>不解析v-text文本输出'
}
})
</script>
</pre>
<br>++++++++++++++++++++++++++++++<br><br>
<script type="text/javascript">
var app9 = new Vue({
    el:'#app-9',
    data:{
msg:'这个是{{msg}}的输出',
msg1:'v-text文本输出',
msg2:'<strong>welcome</strong>不解析v-text文本输出'
}
    })
</script>

10、v-html 解析html标签
<div id="app-10">
<p>{{msg}}</p>
<p v-html="msg1"></p> 
<p v-html="msg2"></p> 
</div>
<pre style="font-size: 18px;font-weight: bold;color: #373636;background-color: #51A5FC;padding: 15px 0px;">
<div id="app-10">
<p>{{msg}}</p>
<p v-html="msg1"></p> 
<p v-html="msg2"></p> 
</div>
<script type="text/javascript">
var app10 = new Vue({
el:'#app-10',
data:{
msg:'welcome',
msg1:'<h1>121212</h1>',
msg2:'<strong>Hello World!</strong>'
}
})
</script>
</pre>
<br>++++++++++++++++++++++++++++++<br><br>
<script type="text/javascript">
var app10 = new Vue({
el:'#app-10',
        data:{
msg:'welcome',
msg1:'<h1>121212</h1>',
msg2:'<strong>Hello World!</strong>'
}
})
</script>

11、v-cloak防闪烁
<div id="app-11">
<div v-cloak="">欢迎--{{msg}}</div>
</div>
<pre style="font-size: 18px;font-weight: bold;color: #373636;background-color: #51A5FC;padding: 15px 0px;">
<div id="app-11">
<div v-cloak="">欢迎--{{msg}}</div>
</div>
<script>
var app11 = new Vue({
el:"#app-11",
data:{
msg:"111111"
}
})
</script>
</pre>
<br>++++++++++++++++++++++++++++++<br><br>
<script>
var app11 = new Vue({
el:"#app-11",
data:{
msg:"111111"
}
})
</script>

12、v-pre 把标签内部的元素原位输出
<div id="app-12">
<p v-pre>{{ this will not be compiled }} + 'msg'</p>
</div>
<pre style="font-size: 18px;font-weight: bold;color: #373636;background-color: #51A5FC;padding: 15px 0px;">
<div id="app-12">
<p v-pre>{{ this will not be compiled }} + 'msg'</p>
</div>
<script>
var app12 = new Vue({
el:"#app-12",
data:{
msg: 'Hello World!'
}
})
</script>
</pre>
<br>++++++++++++++++++++++++++++++<br><br>
<script>
var app12 = new Vue({
el:"#app-12",
data:{
msg: 'Hello World!'
}
})
</script>

附送一个小案例：<br>
<div id="picImg">
<img v-bind:src="src">
</div>
<pre style="font-size: 18px;font-weight: bold;color: #373636;background-color: #51A5FC;padding: 15px 0px;">
<div id="picImg">
  <img v-bind:src="src">
</div>
<script>
var app14 = new Vue({
el:"#picImg",
data:{
src:'lb_pic.png' //这里按照正常引入图片的路径填写就好
}
})
</script>
</pre>
<br>++++++++++++++++++++++++++++++<br><br>

<script>
var app14 = new Vue({
el:"#picImg",
data:{
src:'lb_pic.png'
}
})
</script>
</body>
</html>

一梦醉殇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue指令

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;Vue指令&lt;/title&gt;&lt;script src="https://cdn.jsdelivr.net/npm/vue"&gt;&a
复制链接

扫一扫