随笔分类 - Vue
摘要：<style> .red { color: red; } </style> <body> <div id="app"> <ul> <li v-for="(i , index ) in list" @click="changeLi(index)" :class="{red:redIndex==inde
阅读全文
摘要：<body> <div id="app"> <button @click="toggleIsShow">切换显示状态</button> <p v-if="isShow">我是一个段落 v-if</p> <p v-show="isShow">我是一个段落 v-show</p> <h2 v-if="te
阅读全文
摘要：<body> <div id="app"> <div class="box"> <span v-if="isShow"> <label for="username">用户账户</label> <input type="text" placeholder="用户账户" id="username" ke
阅读全文
摘要：<body> <div id="app"> <h2 v-if="true"> {{ message }} </h2> <h1 v-else> isShow为false时显示</h1> </div> <script src='https://cdn.jsdelivr.net/npm/vue@2.6.1
阅读全文
摘要：<style> img { width: 200px; } </style> <body> <div id="app"> <button @click="changeisShow">切换显示状态</button> <button @click="addAge">累加年龄</button> <img
阅读全文
摘要：<style> * { margin: 0; padding: 0; } #app { display: flex; width: 300px; height: 50px; background-color: #ccc; margin: 50px auto; border-radius: 7px;
阅读全文
摘要：<body> <div id="app"> <input type="button" value="v-on指令" v-on:click="doit"> <input type="button" value="v-on简写" @click='doit'> <input type="button" v
阅读全文
摘要：<body> <div id="app"> <div @click="divClick"> 123456789 <!-- 1 .stop修饰符的使用 阻止冒泡 --> <button @click.stop="btnClick">按钮</button> </div> <!-- 2 .prevent修
阅读全文
摘要：<body> <div id="app"> <!-- 事件调用的方法没有参数 小括号可以省略 --> <button @click="btnClick()">导航1</button> <button @click="btnClick">导航2</button> <!-- 在事件定义时。写方法时省略小
阅读全文
摘要：<body> <div id="app"> <!-- 修饰符 .lazy 回车或者失去光标的时候 h2标签里面的 message才会同步 --> <input type="text" v-model.lazy="message"> 请输入内容 <h2> {{ message }} </h2> <!-
阅读全文
摘要：<body> <div id="app"> <button @click="add">+</button> <button @click="sub">-</button> <p> {{ num }} </p> </div> <script src='https://cdn.jsdelivr.net/
阅读全文
摘要：<body> <div id="app"> {{ message }} <h2> {{ school.name }} {{ school.mobile }} <!-- Vue拿到对象 在双括号里面取值和之前方式一样 在需要取的属性前面 加点 --> </h2> <ul> <li> {{campus[
阅读全文
摘要：<body> <div id="app"> {{ message }} <span> {{ message }} </span> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> <s
阅读全文
摘要：<body> <div id="app"> <h1> {{ message }} </h1> <h2 v-pre> {{ message }} </h2> <!-- v-pre指令用的很少 使用这个指令的标签内容不会被解析 是什么内容就显示什么内容 {{ message }} --> </div>
阅读全文
摘要：<body> <div id="app"> <h1> {{ message }}, 李银河 </h1> <h2 v-text="message">, 李银河</h2> <!-- v-text一般很少用到 没有mustache语法{{}} 灵活 在标签里写上v-text指令和其他文本后 这个指令里的内
阅读全文
摘要：<body> <div id="app"> <h1> {{ message }} </h1> <h2 v-html="message"> </h2> </div> <script src='https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js'></
阅读全文
摘要：<body> <div id="app"> <h1> {{ message }} </h1> <h2 v-once> {{ message }} </h2> <!-- 在标签内部使用 v-once 指令 在后台调试的时候 改不了值 首次渲染后，不再随着数据的改变而重新渲染。 没有加v-once指令的
阅读全文
摘要：<body> <div id="app"> {{ message }} </div> 引入vue官方文档 </script> <!-- 1.首先导入开发版本的Vue.js --> <script> // 2.创建Vue实例对象，设置el属性 和data属性 // 建议使用let关键字和 const关
阅读全文
摘要：<body> <div id="app"> <h1> {{ message }} </h1> <p> {{ firstName + " " + lastName}} </p> <h2> {{ counter * 2 }} </h2> </div> 引入Vue官方文档 // mustache语法就是
阅读全文
浙公网安备 33010602011771号