Vue常用指令
文章目录
- Vue常用指令
- v-if,v-show指令
- v-if 例子
- v-show例子
- v-for指令
- 例子
- v-text,v-html,v-clock指令
- 例子
- 页面展示
- v-bind,v-on指令
- 例子
- v-model指令
Vue常用指令
vue.js官方给自己的定为是数据模板引擎，并给出了一套渲染数据的指令.
- v-if
- v-show
- v-for
- v-text
- v-html
- v-clock
- v-bind
- v-on
- v-model
v-if,v-show指令
v-if = “expression” : 根据表达式的真假来删除和插入元素
v-show = “expression” : 不会每次都去删除和创建DOM元素 , 而是通过dispaly:none将元素隐藏起来
v-if 例子
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="lib/vue-2.4.0.js">script>
<script src="layui/layui.js">script>
<link rel="stylesheet" href="layui/css/layui.css">
head>
<body>
<div id="app">
<span v-if="flag">显示span>
<button @click="changeData" class="layui-btn">点击button>
div>
body>
<script>
let app = new Vue({
el: "#app",
data: {
flag: true
},
methods: {
changeData() {
this.flag=!this.flag;
}
}
})
script>
html>
v-show例子
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="lib/vue-2.4.0.js">script>
<link rel="stylesheet" href="layui/css/layui.css">
head>
<body>
<div id="app">
<span v-show="flag">显示span>
<button @click="changeData" class="layui-btn layui-icon layui-icon-logout">点击button>
div>
body>
<script src="layui/layui.js">script>
<script>
let app = new Vue({
el: "#app",
data: {
flag: true
},
methods: {
changeData() {
this.flag=!this.flag;
}
}
})
script>
html>
v-for指令
v-for = “item in items” : 基于一个数组渲染一个列表
v-for是Vue中的遍历（循环）指令。
(item,index) in dataList,item是遍历的每一项名称，index是每一项的索引值
索引值：{{index}}---数据：{{item}}
索引值：{{i}}--id：{{obj.id}}--name：{{obj.name}}
这是第{{count}}次循环，索引为{{index}}
key是在v-for中表示唯一标识，在任何的v-for中建议都加上key。key一定要保证唯一性
例子
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="./lib/vue-2.4.0.js">script>
head>
<style>
.red {
color: red;
}
.size {
font-size: 20px;
}
.back {
background-color: green;
}
style>
<body>
<div id="app">
<div>
<input type="text" v-model="id">
<input type="text" v-model="name">
<button @click="add">添加button>
div>
<p v-for="item in objectList" :key="item.id">
<input type="checkbox" name="" id=""> {{item.id}} --- {{item.name}}
p>
div>
<script>
var vue = new Vue({
el: '#app',
data: {
simpleList: [1, 2, 3, 4, 5, 6],
objectList: [
{ id: 1, name: '张三' },
{ id: 2, name: '李四' },
{ id: 3, name: '王五' },
{ id: 4, name: '赵六' }
],
id: '',
name: '',
},
methods: {
add() {
const obj = {id: this.id, name: this.name}
this.objectList.unshift(obj)
}
}
})
script>
body>
html>
v-text,v-html,v-clock指令
v-text：会覆盖原有标签中的内容，将data中的数据作为字符串处理
v-html: 会将data作为html标签去渲染
v-clock: 占位符指令，会替换掉自己的这个占位，不会把整个元素清空
例子
Title
{{msg1}},你好
你好
你好
页面展示
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9wgZfpEi-1591757039890)(en-resource://database/498:1)]
v-bind,v-on指令
v-bind：Vue中提供用户绑定属性的指令，也可以写成：
v-on：Vue提供的事件绑定指令，也可以简写成@
例子
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="lib/vue-2.4.0.js">script>
<link rel="stylesheet" href="layui/css/layui.css">
head>
<body>
<div id="app">
<a v-bind:href="msg">按钮a>
<button v-on:click="add" class="layui-btn">点击button>
div>
body>
<script src="layui/layui.js">script>
<script>
layui.use(["layer"],function () {
let app = new Vue({
el: "#app",
data: {
msg: "www.baidu.com",
},
methods:{
add(){
layer.alert("123");
}
}
})
})
script>
html>
v-model指令
v-model : 数据的双向绑定 , 只能用于表单元素. 一方被修改之后另一方也会同步修改
v- bind : 数据的单向绑定. 当model中数据被修改是 , bind绑定的数据会被修改. 而bind绑定的位置改变model则不会被修改
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="lib/vue-2.4.0.js">script>
<link rel="stylesheet" href="layui/css/layui.css">
head>
<body>
<div id="app">
<input type="text" v-model="msg">
<input type="text" :value="msg1">
div>
body>
<script src="layui/layui.js">script>
<script>
layui.use(['layer'], function () {
let app = new Vue({
el: "#app",
data: {
msg: "v-model的值",
msg1: "V-bind的值"
},
methods: {}
})
})
script>
html>