v-text
设置标签的文本属性
v-text会覆盖原本标签的值- 标签想要部分设置文本可以使用
{{ }}方式 v-text、{{ }}支持逻辑表达式
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<body>
<div id="app">
<h2>信息：{{ message }}</h2>
<h2>信息：{{ message + "!" }}</h2>
<h2 v-text="name">姓名</h2>
<h2 v-text="name+' !'">姓名</h2>
</div>
</body>
<script>
var vue = new Vue({
el:"#app",
data:{
message:"大数据男孩",
name:"Bigdataboy",
}
})
</script>
v-html
设置元素的
innerHTML，data对象里的HTML结构会解析成标签，v-text只会解析成文本
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<body>
<div id="app">
<p v-html="content"></p>
</div>
</body>
<script>
var vue = new Vue({
el:"#app",
data:{
content: "<h2>大数据男孩</h2>"
}
})
</script>
v-on
为元素绑定
事件
- 完整格式：
v-on:事件="方法名"缩写：@事件="方法名" - 绑定的方法定义在
methods属性里面 - 相关事件：
click 点击、dblclick 双击、mouseenter 鼠标移动…
<body>
<div id="app">
<input type="button" value="v-on 指令" v-on:click="fun">
<input type="button" value="v-on 缩写" @click="fun">
<p v-text="message" @click="changeMessage"></p>
</div>
</body>
<script>
var vue = new Vue({
el:"#app",
data:{
message:"大数据男孩",
},
methods:{
fun:function(){
alert("事件绑定")
},
changeMessage:function(){
this.message += "真帅"
},
},
})
</script>
v-on 补充
传参
事件绑定方法写成
函数调用形式，可以传入自定义参数
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<body>
<div id="app">
<input type="button" value="按钮" @click="doBtn('老铁','666666')"/>
</div>
</body>
<script>
var vue = new Vue({
el: "#app",
methods:{
doBtn:function(p1,p2){
console.log(p1, p2)
}
}
})
</script>
修饰符
事件的后面跟上
.修饰符可以对事件进行限制
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<body>
<div id="app">
<input type="text" @keyup.enter="doEnter('回车被点击')"/>
</div>
</body>
<script>
var vue = new Vue({
el: "#app",
methods:{
doEnter:function(p){
console.log(p)
}
}
})
</script>
v-show
用于
显示 & 隐藏标签
- 支持
条件表达式 - 本质是控制
display: none;
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<body>
<div id="app">
<!-- 布尔值 -->
<img v-show="true" src="./img/1.jpg" style="width: 10%; height: 10%;"/>
<!-- 变量控制 -->
<img v-show="isShow" src="./img/1.jpg" style="width: 10%; height: 10%;"/>
<!-- 条件表达式 -->
<img v-show="age > 18" src="./img/1.jpg" style="width: 10%; height: 10%;"/>
</div>
</body>
<script>
var vue = new Vue({
el:"#app",
data:{
isShow:true,
age:17
},
})
</script>
v-if
用于
显示 & 隐藏标签
- 支持
条件表达式 - 本质是判定为
false时把标签移除 v-if相对于v-show，更消耗性能，因为v-if需要操作DOM树
<body>
<div id="app">
<input type="button" @click="toggleIsShow" value="切换 v-if" />
<p></p>
<!-- 变量控制 -->
<img v-if="isShow" src="./img/1.jpg" style="width: 10%; height: 10%;"/>
<!-- 条件表达式 -->
<img v-if="age > 18" src="./img/1.jpg" style="width: 10%; height: 10%;"/>
</div>
</body>
<script>
var vue = new Vue({
el:"#app",
data:{
isShow:true,
age:17
},
methods:{
toggleIsShow:function(){
this.isShow = !this.isShow
}
}
})
</script>
v-bind
为元素绑定
属性
- 完整写法：
v-bind:属性 - 缩写：
:属性 - 如果设置的
class 属性，建议使用对象方式判断是否添加类名
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<body>
<div id="app">
<!-- 绑定 src 属性（完整写法） -->
<img v-bind:src="isSrc" style="width: 10%; height: 10%;" />
<br />
<!-- 绑定 src 属性（缩写写法） -->
<img :src="isSrc" style="width: 10%; height: 10%;" />
<br />
<!-- 绑定类名（建议对象写法） -->
<img :src="isSrc" :class="{img:isShow,active:isActive}" style="width: 10%; height: 10%;" />
<!-- 绑定类名（数组写法） -->
<img :src="isSrc" :class="[show,active]" style="width: 10%; height: 10%;" />
</div>
</body>
<script>
var vue = new Vue({
el: "#app",
data: {
isSrc: "./img/1.jpg",
isShow: true,
isActive: true,
show:"show",
active:"active",
}
})
</script>
v-for
根据
数组生成列表结构
v-for经常与数组搭配使用- 语法：
(item,index) in 数组 改变数组的内容会同步更新到页面上，是响应式的
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<body>
<div id="app">
<h2>大数据男孩</h2>
<ul>
<li v-for="(item,index) in arr">
{{ index + 1 }} {{ item }}
</li>
</ul>
<h2>兴趣</h2>
<h3 v-for="i in interest" v-bind:title="i.name"> {{ i.name }}</h3>
</div>
</body>
<script>
var vue = new Vue({
el: "#app",
data: {
arr:["帅气","没钱","可爱","有趣","想了解吗？"],
interest:[
{"name":"摄影"},
{"name":"网络"},
{"name":"哲学"},
]
}
})
</script>
v-model
便捷
设置和获取表单元素的值
绑定的数据会和表单元素的值相关联- 绑定的数据 <—-> 表单元素的值
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<body>
<div id="app">
<input type="text" v-model="message"/>
<h2 v-text="message"></h2>
</div>
</body>
<script>
var vue = new Vue({
el: "#app",
data:{
message: "",
}
})
</script>
下一篇
【Vue】入门概述
【Vue】入门概述
版权声明：《 【Vue】Vue 指令 》为明妃原创文章，转载请注明出处！
最后编辑:2020-9-28 03:09:44