v-if / v-else / v-else-if 条件判断
这里，`v-if` 指令将根据表达式 `seen` 的值的真假来插入/移除 `<p>` 元素。
<body> <div id="div" > <p v-if="seen">现在你看到我了</p> </div> </body> <script> var app = new Vue({ el:‘#div‘, data:{ seen:false } }) </script>
<body> <div id="app"> <input type="text" id="" v-model="type"> <div v-if="type === ‘A‘">我是A</div> <div v-else-if="type === ‘B‘">我是B</div> <div v-else-if="type === ‘C‘">我是C</div> <div v-else-if="type === ‘D‘">我是D</div> <div v-else>我啥也不是</div> </div> </body> <script> var app = new Vue({ el:‘#app‘, data:{ type:‘‘ } }); </script>
<div id="app"> <ul> <li v-for="(val,key) in arr">{{val}}---{{key}}</li> </ul> <ul> <li v-for="(val,key) in obj">{{val}}---{{key}}</li> </ul> </div> <script> var vm = new Vue({ el: ‘#app‘, data: { arr: [‘a‘, ‘b‘, ‘c‘], obj: { id: 1, name: ‘李四‘ } }, }) </script>
<body> <div id="app"> <!-- 数组 --> <ul> <li>{{arr[3]}}</li> <!-- v-for 循环的语法规则参考 js 的 for in 循环 --> <!-- 循环中可以得到值和下标 --> <!-- 值和下标完全当做data中的数据使用即可 --> <li v-for="(v,key) in arr" v-bind:id="v" v-if="key%2 !== 0">{{v}}---{{key}}</li> </ul> <!-- 对象 --> <ul> <li v-for="(v,k) in oop">{{v}}----{{k}}</li> </ul> </div> </body> <script> // for(cc in arr) var app = new Vue({ el:‘#app‘, data:{ arr:[‘ff‘,‘hh4‘,‘liuneng‘,‘伊丽莎白‘,‘yazhouwuwang‘], oop:{name:‘刘能‘,guinv:‘刘英‘,tubie:‘赵玉田‘} } }); </script>
根据表达式之真假值，切换元素的 `display` CSS 属性
案例：点击按钮切换隐藏显示
<div id="app"> <input type="button" value="按钮" @click="isshow"> <p v-show="is_show">Vue</p> </div> <script> var vm = new Vue({ el:‘#app‘, data:{ is_show:false }, methods:{ isshow:function(){ this.is_show = !this.is_show; } }, }) </script>
<body> <div id="app"> <!-- v-html和v-text都是替换标签内容的 --> <!-- v-text 原样展示内容 --> <p v-text="s"></p> <!-- v-html 解析并展示内容 --> <p v-html="n"></p> <!-- 插值表达式与v-text类似，都是原样展示内容 --> <p>{{k}}</p> <!-- 插值表达式与v-text的区别 --> <!-- v-text会替换标签内的全部内容 --> <p v-text="s">oooo</p> <!-- 插值表达式替换局部内容 --> <p >oooo{{k}}</p> </div> </body> <script> var app = new Vue({ el:‘#app‘, data:{ s:‘<s>123</s>‘, n:‘<s>345</s>‘, k:‘<s>567</s>‘ } }); </script>
可以绑定标签上的任何属性。
动态绑定图片的路径:
<img id=“app” v-bind:src="src" /> <script> var vm = new Vue({ el: ‘#app‘, data: { src: ‘1.jpg‘ } }); </script>
绑定a标签上的id:
<a id="app" v-bind:href="‘del.php?id=‘ + id">删除</a> <script> var vm = new Vue({ el: ‘#app‘, data: { id: 11 } }); </script>
绑定class:
对象语法和数组语法
1. 对象语法
如果isActive为true，则返回的结果为
<div id="app" class="active"></div>
<div id="app" v-bind:class="{active: isActive}"> hei </div> <script> var vm = new Vue({ el: ‘#app‘, data: { isActive: true } }); </script>
2. 数组语法
渲染的结果
<div id="app" class="active text-danger"></div>
<div id="app" v-bind:class="[activeClass, dangerClass]"> hei </div> <script> var vm = new Vue({ el: ‘#app‘, data: { activeClass: ‘active‘, dangerClass: ‘text-danger‘ } }); </script>
绑定style
对象语法和数组语法
1. 对象语法 - 渲染结果：
<div id="app" style="color: red; font-size: 40px;">hei</div>
<div id="app" v-bind:style="{color: redColor, fontSize: font + ‘px‘}"> hei </div> <script> var vm = new Vue({ el: ‘#app‘, data: { redColor: ‘red‘, font: 40 } }); </script>
2. 数组语法 - 渲染结果：
<div id="app" style="color: red; font-size: 18px;">abc</div>
<div id="app" v-bind:style="[color, fontSize]">abc</div> <script> var vm = new Vue({ el: ‘#app‘, data: { color: { color: ‘red‘ }, fontSize: { ‘font-size‘: ‘18px‘ } } }); </script>
v-bind 简化语法（: 代表v-bind）
<div id="app"> <img v-bind:src="imageSrc"> <!-- 缩写 --> <img :src="imageSrc"> </div> <script> var vm = new Vue({ el: ‘#app‘, data: { imageSrc: ‘1.jpg‘, } }); </script>
数据绑定 - 单向数据绑定
<div id="div"> <input type="text" :value="input_val"> </div> <script> var app = new Vue({ el: ‘#div‘, data: { input_val: ‘hello world ‘ } }) </script>
浏览器渲染结果：
<div id="div"><input type="text" value="hello world"></div>
通过浏览器 REPL 环境可以进行修改
app.input_val = ‘Vue‘
浏览器渲染结果：
<div id="div"><input type="text" value="Vue"></div>
我们通过 vue 对象修改数据可以直接影响到 DOM 元素，但是，如果直接修改 DOM 元素，却不会影响到 vue 对象的数据；我们把这种现象称为 单向数据绑定
<div id="div"> <input type="text" v-model="input_val" > </div> <script> var app = new Vue({ el: ‘#div‘, data: { input_val: ‘hello world ‘ } }) </script>
通过 v-model 指令展示表单数据，此时就完成了 双向数据绑定
不管 DOM 元素还是 vue 对象，数据的改变都会影响到另一个
注意：数据绑定是目前所有MVVM前端框架的核心特性；甚至可以说，没有数据绑定就不能算是框架；
双向数据绑定的应用范围
文本框 和 文本域
<div id="div"> <textarea v-model="inp_val"></textarea> <div>{{ inp_val }}</div> </div> <script> var app = new Vue({ el: ‘#div‘, data: { inp_val: ‘‘ } }) </script>
绑定复选框
<div id="div"> 吃饭：<input type="checkbox" value="eat" v-model="checklist"><br> 睡觉：<input type="checkbox" value="sleep" v-model="checklist"><br> 打豆豆：<input type="checkbox" value="ddd" v-model="checklist"><br> {{ checklist }} </div> <script> var vm = new Vue({ el: ‘#div‘, data: { checklist: ‘‘ // checklist: [] } }); </script>
绑定单选框
<div id="app"> 男<input type="radio" name="sex" value="男" v-model="sex"> 女<input type="radio" name="sex" value="女" v-model="sex"> <br> {{sex}} </div> <script> var vm = new Vue({ el: ‘#app‘, data: { sex: ‘‘ } }); </script>
修饰符
<div id="div"> <input type="text" v-model.lazy="input_val"> {{input_val}} </div> <script> var app = new Vue({ el: ‘#div‘, data: { input_val: ‘hello world ‘ } }) </script>
v-model.lazy https://cn.vuejs.org/v2/guide/forms.html#lazy - 取代 `input` 监听 `change` 事件
v-model.number https://cn.vuejs.org/v2/guide/forms.html#number - 输入字符串转为有效的数字
v-model.trim https://cn.vuejs.org/v2/guide/forms.html#trim - 输入首尾空格过滤
https://cn.vuejs.org/v2/guide/events.html
1. 基本使用
<div id="app"> <input type="button" value="按钮" v-on:click="cli"> </div> <script> var vm = new Vue({ el: ‘#app‘, data: { cli:function(){ alert(‘123‘); } } }); </script>
上面的代码运行是没有问题的，但是，我们不建议这样做，因为 data 是专门提供数据的对象，事件触发需要执行的是一段代码，需要的是一个方法 (事件处理程序) ；
修改代码如下：
<div id="app"> <!-- 使用事件绑定的简写形式 --> <input type="button" value="按钮" @click="cli"> </div> <script> var vm = new Vue({ el: ‘#app‘, data: {}, // 将事件处理程序写入methods对象 methods: { cli: function () { alert(‘123‘); } } }); </script>
向事件处理器中传参
<div id="app"> <!-- 直接调用传参即可 --> <input type="button" value="按钮" @click="cli(1,3)"> </div> <script> var vm = new Vue({ el: ‘#app‘, data: {}, methods: { // 接受参数 cli: function (a,b) { alert(a+b); } } }); </script>
而此时，如果在处理器中需要使用事件对象，则无法获取，我们可以用特殊变量 `$event` 把它传入方法
<input type="button" value="按钮" @click="cli(1,3,$event)">
methods: {
// 接受参数
cli: function (a,b,ev) {
alert(a+b);
console.log(ev);
}
}
2. 事件修饰符
原生 JS 代码，想要阻止浏览器的默认行为(a标签跳转、submit提交)，我们要使用事件对象的 `preventDefault()` 方法
<div id="app"> <a href="http://www.qq.com" id="a">腾百万</a> </div> <script> document.getElementById(‘a‘).onclick = (ev)=>{ // 组织浏览器的默认行为 ev.preventDefault(); } </script>
使用修饰符 阻止浏览器的默认行为
<div id="app"> <a href="http://www.qq.com" @click.prevent="cli">腾百万</a> </div> <script> var vm = new Vue({ el: ‘#app‘, data: {}, // 将事件处理程序写入methods对象 methods: { cli: function () { alert(‘123‘); } } }); </script>
使用修饰符绑定一次性事件
<div id="app"> <a href="http://www.qq.com" @click.once="cli($event)">腾百万</a> </div> <script> var vm = new Vue({ el: ‘#app‘, data: {}, // 将事件处理程序写入methods对象 methods: { cli: function (ev) { ev.preventDefault(); alert(‘123‘); } } }); </script>
按键修饰符
绑定键盘抬起事件，但是只有`enter` 键能触发此事件
<div id="app"> <input type="text" @keyup.enter="keyup"> </div> <script> var vm = new Vue({ el: ‘#app‘, data: {}, methods: { keyup:()=>{ console.log(‘111‘) } } }); </script>
系统修饰符
按住 `shift` 后才能触发点击事件
<div id="app"> <input type="button" value="按钮" @click.shift="cli"> </div> <script> var vm = new Vue({ el: ‘#app‘, data: {}, methods: { cli:()=>{ console.log(‘111‘) } } }); </script>
鼠标修饰符
鼠标中键触发事件
<div id="app"> <input type="button" value="按钮" @click.middle="cli"> </div> <script> var vm = new Vue({ el: ‘#app‘, data: {}, methods: { cli:()=>{ console.log(‘111‘) } } }); </script>
当我们的网络很慢时，或者页面加载完毕而没有初始化得到 vue 实例时，页面中的 `{{}}` 则会展示出来,很不友好
为了防止这种现象，我们可以使用 CSS 配合 v-cloak 实现获取 VUE 实例前的隐藏（就是如果Vue没有加载进来则不显示Vue的代码）
<style> [v-cloak] { display: none; } </style> <div id="app"> <p v-cloak>{{obj.id}}</p> </div> <script src="./vue.js"></script> <script> setTimeout(() => { var vm = new Vue({ el: ‘#app‘, data: { obj: { id: 1, name: ‘李四‘ } }, }) }, 2000); </script>
<style> [v-cloak]{ display: none } </style> </head> <body> <div id="app"> <!-- 在vue加载之前隐藏插值表达式 --> <div v-cloak> {{obj.name}} </div> </div> </body> <script> var app = new Vue({ el:‘#app‘, data:{ obj:{name:‘lisi‘} } }); </script>
只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过
<div id="app"> <p v-once>{{msg}}</p> </div> <script> var vm = new Vue({ el: ‘#app‘, data: { msg:‘kkk‘ }, }) </script>
<body> <div id="app"> <span v-pre>{{ 这条语句将不会被编译，原样输出 }}</span> <input type="text" name="" id="" v-model=‘msg‘><br> {{msg}} </div> <script> var app = new Vue({ el:‘#app‘, data:{ msg:‘‘ } }) </script> </body>
原文：https://www.cnblogs.com/dazahui/p/14537910.html