v-model 修饰符
- <template>
- <div id="demo14">
- <p>----------------- 模板语法之修饰符 ----------------</p>
- <!-- .prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault(), 取消事件的默认动作. -->
- <form v-on:submit.prevent="onSubmit">
- <input type="submit" value="submit">
- </form>
- <form v-on:submit="onSubmit">
- <input type="submit" value="submit2">
- </form>
- <!-- 当在文本框输入内容, 并且光标焦点没有离开文本框时, 属性值没有实时发生变化 -->
- <h2>v-model.lazy</h2>
- <input type="text" v-model.lazy="input_lazy">
- <h2>v-model.number</h2>
- <input type="text" v-model.number="input_number">
- <h2>v-model.trim</h2>
- <input type="text" v-model.trim="input_trim">
- </div>
- </template>
- <script>
- export default {
- data() {
- return {
- url: "https://www.baidu.com",
- input_lazy: "",
- input_number: "",
- input_trim: ""
- };
- },
- methods: {
- onSubmit: function() {
- console.log(this.url);
- }
- }
- };
- </script>
事件处理修饰符
- <template>
- <section>
- <div id="demo23-1">
- <p>----------------- 事件处理之修饰符 ---------------------</p>
- <!-- 阻止单击事件继续传播 , 将上面两个方法绑定到一组具有父子关系的元素上 -->
- <div @click="div_click">
- <a v-on:click.stop="stop_click">click.stop</a>
- </div>
- <div @click="div_click">
- <a v-on:click="stop_click">click without stop</a>
- </div>
- <!-- 提交事件不再重载页面 阻止表单提交并刷新当前页面的默认行为.-->
- <form v-on:submit.prevent="form_submit">
- <input type="submit" value="submit">
- </form>
- <!-- 修饰符可以串联 -->
- <a v-on:click.stop.prevent="doThis"> 串联 </a>
- <!-- 只有修饰符 -->
- <form v-on:submit.prevent></form>
- </div>
- <p>------------------------------</p>
- <div id="demo23-2" v-on:click.capture="doThis">test capture</div>
- <p>------------------------------</p>
- <!-- 该指令只当事件是从事件绑定的元素本身触发时才触发回调 -->
- <div id="demo23-3" v-on:click.self="div_click" style="display:inline-block; width:200px; background-color:red;">
- <button type="button" @click="stop_click">Button</button>
- </div>
- <button type="button" @click.once="once_click">Onceclick</button>
- <p>------------------------------</p>
- <div id="demo24-4">
- <!-- Enter -->
- <input v-on:keyup.13="doThis">
- <input type="text" @keyup.enter="enter_click" placeholder="enter_click">
- <!-- Alt + C -->
- <input @keyup.alt.67="doThis">
- <!-- Ctrl + Click -->
- <div @click.ctrl="doThis">doThis</div>
- <!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
- <button @click.ctrl="doThis">A</button>
- <!-- 有且只有 Ctrl 被按下的时候才触发 -->
- <button @click.ctrl.exact="doThis">B</button>
- <!-- 没有任何系统修饰符被按下的时候才触发 -->
- <button @click.exact="doThis">C</button>
- </div>
- </section>
- </template>
- <script>
- export default {
- data() {
- return {
- name: "vue.js"
- };
- },
- methods: {
- doThis: function() {
- alert("Hello" + name + "!");
- },
- div_click() {
- console.log("div click");
- },
- stop_click() {
- console.log("stop click");
- },
- form_submit() {
- console.log("form submit");
- },
- enter_click() {
- console.log("enter click");
- },
- once_click() {
- console.log("once click");
- }
- }
- };
- </script>
https://www.jianshu.com/p/60135bb32ebb vue 常用修饰符
来源: http://www.bubuko.com/infodetail-3097858.html