一、事件处理指令v-on

• 用于进行元素的事件绑定。示例1：

• Vue.js 还为 v-on 指令提供了简写方式。示例2：v-on的简介方式

• 事件程序代码较多时，可以在 methods 中设置函数，并设置为事件处理程序。

• 设置事件处理程序后，可以从参数中接收事件对象。

• 在视图中可以通过 $event 访问事件对象。

• 如果只写了一个参数，没有写$event，那么在视图中该方法不可以通过$event 访问事件对象。

<body><div id="app"><p>{{ content }}</p><button v-on:click="content = '这是按钮一的新内容'">第一个按钮</button><button @click="content = '这是按钮二的新内容'">第二个按钮</button><button @click="fn">第三个按钮</button><button @click="fn2(200)">第四个按钮</button><button @click="fn2(200,$event)">第五个按钮</button></div><script src="../01.vue.js入门/js/vue-2.6.14.js"></script><script>new Vue({el: '#app',data: {content: '这是content的默认内容'},methods: {fn(event) {console.log(event);this.content = '这是按钮三的新内容'},fn2(value,event) {console.log(value,event);}}})</script>
</body>

二、表单输入绑定v-model

• 用于给 <input> 、<textarea> 及 <select> 元素设置双向数据绑定。我们前面所学习的都是单向数据绑定，单向数据绑定呢，就是数据更新视图，我们的数据一旦发生变化，我们的视图也会随之发生改变，那么我们的双向绑定时什么样的实现顺序呢？双向数据绑定就是我们数据更新视图之后，我们用户再视图当中操作，也会发生视图变化，这个就是视图更新视图。总结：第一步：数据更新视图，第二步：视图更新视图

1.输入框绑定

• 输入框分为单行输入框 input 与多行输入框 textarea。

<body><div id="app"><p>这是您输入的信息: {{ value1 }} </p>请输入内容:<input type="text" v-model="value1"><p>这是您输入的信息: {{ value2 }}</p>请输入内容: <textarea v-model="value2"></textarea></div><script src="../01.vue.js入门/js/vue-2.6.14.js"></script><script>var vm = new Vue({el: '#app',data: {value1: '',value2: ''}})</script>
</body>

2.单选按钮绑定

• 单选按钮的双向数据绑定方式如下：

<body><div id="app"><p>这是单选框输入的内容: {{ value }} </p><input type="radio" id="one" value="1" v-model="value">单选框一<label for="one"></label><input type="radio" id="two" value="2" v-model="value">单选框二<label for="two"></label></div><script src="../01.vue.js入门/js/vue-2.6.14.js"></script><script>var vm = new Vue({el: '#app',data: {value: ''}})</script>
</body>

3.复选框绑定

• 复选框绑定分为单个选项与多个选项两种情况，书写方式不同。

单个选项的情况：结果为2种布尔类型的值，一个是true，一个是false

多个选项的情况：结果是将选中的复选框的value值存入到数组中

注意：单个选项初始定义时要定义成空的字符串，多个选项初始定义时要定义成一个空数组。

<body><div id="app"><!-- 单个选项示例 --><p>这是复选框选中的内容: {{ value1 }}</p><input type="checkbox" value="选项内容" id="item" v-model="value1"><label for="item">选项内容</label><!-- 多个选项示例 --><p>这是复选框选中的内容: {{ value2 }}</p><input type="checkbox" value="选项一" id="one" v-model="value2"><label for="one">选项一</label><input type="checkbox" value="选项二" id="two" v-model="value2"><label for="two">选项二</label></div><script src="../01.vue.js入门/js/vue-2.6.14.js"></script><script>new Vue({el: '#app',data: {value1: '',value2: []}})</script>
</body>

4.选择框绑定

• 选择框和上面的复选框一样，绑定分为单选绑定与多选绑定两种情况，书写方式不同。

单个选项的情况：结果为2种布尔类型的值，一个是true，一个是false

多个选项的情况：结果是将选中的复选框的value值存入到数组中

注意：单个选项初始定义时要定义成空的字符串，多个选项初始定义时要定义成一个空数组。

复选选择需要再select标签上添加multiple属性才可以实现效果。然后我们选中多个选项时需要按住键盘的ctrl键+鼠标左键进行点击选择，取消选择再次选中键盘ctrl+鼠标左键点击取消选择即可。

5.v-model 指令小结

• input 输入框：绑定字符串值。
• textarea 输入框：绑定字符串值。
• radio：绑定字符串值。
• checkbox：单个绑定布尔值，多个绑定数组。
• select：单选绑定字符串，多选绑定数组。

（11）vue.js 指令（3）相关推荐

（9）vue.js 指令（1）
一.vue.js指令介绍指令的本质就是 HTML 自定义属性,Vue.js 的指令就是以 v- 开头的自定义属性.我们HTML元素非为固有属性和自定义属性,固有属性就是自己元素本身就有的,比如id, ...
（10）vue.js 指令（2）
八.渲染指令-v-for v-for介绍:v-for指令用于遍历数据渲染结构,常用的数组与对象均可遍历. 示例1:渲染数组当中的数据,item是一个自己起的标识,in是固定的关键字,再···里,arr ...
vue.js指令v-model实现方法
原文链接:http://www.jb51.net/article/99097.htm V-MODEL 是VUE 的一个指令,在input 控件上使用时,可以实现双向绑定. 通过看文档,发现他不过是一个 ...
作用于HTML元素的Vue.js指令
我在这里学习内置指令 v-model v-if v-show v-else v-for v-bind v-on v-model表单数据模型双向绑定 example: ① 表单文本输入框效果 <i ...
Vue.js 指令v-for和v-if和v-show
文章目录 Vue指令之`v-for`和`key`属性代码演示 v-for循环普通数组 v-for循环对象数组 v-for循环对象 v-for迭代数字 v-for循环中key属性的使用 Vue指令之` ...
Vue.js指令实例
v-if v-else v-show v-if 根据表达式的值的真假条件渲染元素. v-else 不需要表达式.前一兄弟元素必须有 v-if 或 v-else-if v-show 根据表达式之真假 ...
浅析Vue.js 中的条件渲染指令
1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...
关于vue.js的部分总结
1.MVVM和MVC的区别: MVVM:是Model-View-ViewModel的简写,即模型-视图-视图模型模型:后端传递的数据试图:所看到的页面视图模型:mvvm模式的核心,它是连接vie ...
axios vue 动态date_Web前端Vue系列之-Vue.js 实战
课程简介: 课程目标:通过本课程的学习,让大家掌握Vue.js的进阶知识并在项目中应用. 适用人群:具有一定vue开发基础的开发人员. 课程概述:Vue (读音 /vjuː/,类似于 view) 是一 ...

（11）vue.js 指令（3）