v-if指令
v-if是条件渲染指令，它根据表达式的真假来删除和插入元素，它的基本语法如下：v-if="expression"
expression是一个返回bool值的表达式，表达式可以是一个bool属性，也可以是一个返回bool的运算式。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h3>班长多少钱，局决定觉定晚上吃什么</h3>
<div v-if="money >= 1000"> 晚上火锅</div>
<div v-else-if="money >= 5000"> 晚上大餐</div>
<div v-else-if="money >= 100"> 南昌拌粉 </div>
<div v-else> 饿着 </div>
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
money:1000
}
})
</script>
</body>
</html>
V-show
v-show指令
v-show也是条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性（display）。
<body>
<!-- v - show 和 v - if 都可以用来控制标签的显示与隐藏
＜标签 v - show ='布尔值'></标签>
＜标签 v - if ='布尔值'><／标签>
当布尔值为 true ，他们就显示；当布尔值为 false ，他们就隐藏，
-->
<!-- <div is="app">
<div v-show="isShow">我是由v-show控制的</div>
<div v-if="isShow">我是由v-if控制的</div>
</div>
<script src="../vue.js"></script>
<script>
new Vue ({
el:'#app',
data:{
isShow:true
}
})
</script>
v-for
v-for指令
v-for指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似：v-for="item in items"
items是一个数组，item是当前被遍历的数组元素。
v-for遍历数组和对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 【v-for】
语法；<标签 v-for='item in 数组'> </标签> -->
<div id="app">
<button @click="add"> 在最后添加一个</button>
<ul>
<!-- 第一个参数是元素，第二个参数是下标 与名字无关 -->
<li v-for="item in list">{{ item }}---{{ index}}</li>
</ul>
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
list:['刘备','关羽','张飞','赵云']
},
methods:{
add(){
this.list.push('马超')
}
}
})
// // 原生写法
// for (let i = 0 ; i < list.length; i ++){
// let li = document.createElement('li')
// li.lnnerHTML = list[i]
// u1.appendchild(li)
// }
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<!-- 对象有多少个属性就会产生多少个这样的标签 -->
<li v-for="item in obj">{{ item }}</li>
<!-- 第一个参数是属性值，第二个参数是属性名 -->
<li v-for="(val,key) in obj">{{ val }}---{{ key }}</li>
</ul>
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
obj:{
name:'jack',
age:16,
sex:'男'
}
}
})
</script>
</body>
</html>
v-bind指令
v-bind指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute）。
动态绑定a元素的href属性
动态绑定img元素的src属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<a href="http://www.baidu.com">跳转</a>
<a v-bind:href="url">跳转</a>
<button @click="change" target="_blank">跳转</button>
</div>
<script src="./../vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
url:'http://mi.com'
},
methods:{
change(){
this.url = 'http://taobao.com'
}
}
})
</script>
</body>
</html>
v-on指令
v-on指令用于给监听DOM事件，它的用语法和v-bind是类似的，例如监听<a>元素的点击事件：<a v-on:click="doSomething">
有两种形式调用方法：绑定一个方法（让事件指向方法的引用），或者使用内联语句。
v-on参数
情况一：如果该方法不需要额外参数，那么方法后的()可以不添加。但是注意，如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去。
情况二：如果该方法需要传入某个参数，同时需要event时，可以通过$event传入事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- v-on指令是事件绑定指令，当用户需要点击，按下键盘，滚动鼠标等操作时，
想要添加一些自己的逻辑处理时，就可以为特定的元素绑定一些特定的事件。 -->
<!-- 我们先在被vue实例挂载的标签div中，放入一个按钮为input标签，在标签内部写入v-on指令， -->
<!-- 冒号(:)后面就是事件名，等号(=)后面就是需要绑定的事件名称 -->
<div id="app">
<!-- 当点击这个按钮 就调用fn1系数 -->
<button v-on:click="fn1">点我试一试</button>
<!-- 当双击这个按钮 就调用fn1系数 -->
<button v-on:dblclick="fn1">再试一次</button>
<!-- 当移入这个按钮 就调用fn2函数 -->
<button mouseenter="fn2">移入我</button>
<!-- 简写形式 吧v-on改成@ -->
<h4>下面是简写形式</h4>
<hr>
<!-- 当点击这个按钮 就调用fn1系数 -->
<button @click="fn1">点我干嘛</button>
<!-- 当双击这个按钮 就调用fn1系数 -->
<button @dblclick="fn1">再试一次</button>
<!-- 当移入这个按钮 就调用fn2函数 -->
<button @mouseenter="fn2">移入我</button>
</div>
<script src="./../vue.js"></script>
<script>
new Vue({
el:'#app',
methods:{
fn1(){
alert('点我干嘛')
},
fn2(){
alert('你怎么了吗')
}
}
})
</script>
</body>
</html>
v-model
1、双向绑定示例
MVVM模式本身是实现了双向绑定的，在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定。
v-model其实是一个语法糖，它的背后本质上包含两个操作
v-bind绑定一个value属性
v-on指令给当前元素绑定input事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入 -->
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<!-- <button @click="msg = '你好'"></button> -->
<!-- 输入框 -->
<!-- v-model获取输入的内容 -->
<!-- <input type="text" v-model="msg"> -->
<!-- <p>{{ msg }}</p> -->
<!-- 下拉框 -->
<!-- v-model获得选中的value值 -->
<!-- <select v-model="fruit">
<option value="apple">苹果</option>
<option value="orange">橘子</option>
<option value="banana">香蕉</option>
<option value="red pitaya">火龙果</option>
</select> -->
<!-- 复选制；只有选中和未选中两种状态 -->
<!-- v-model得到true或flase -->
<!-- <input type="checkbox" v-model="chk">
</div>
<script>
// 例子
new Vue({
el:"#app",
data:{
msg:'你好',
fruit:'火龙果',
chk:true
}
})
</script>
</body> -->
</html>
v-model修饰符
lazy修饰符：
默认情况下，V-mode默认是在input事件中同步输入框的数据的。
也就是说，一旦有数据发生改变对应的data的数据就会自动发生改变。
lazy修饰符可以让数据在失去焦点或者回车时才会更新：
number修饰符：
默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理。
但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。
number修饰符可以让在输入框中输入数字的内容自动转成数字类型：
trim修饰符：
如果输入的内容首尾有很多空格，通常我们希望将其去除口trim修饰符可以过滤内容左右两边的空格
- lazy、number、trim。
764
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
