【Vue3入门1】02- vue3的基本操作(上)

本文介绍vue3中的一些方法的操作。

1. 绑定事件 v-on

2. 按键修饰符

3. 显示和隐藏 v-show

4. 条件渲染 v-if

5. 条件渲染if-else

1. 绑定事件 v-on

点击事件 v-on:click=" 发生事件 "

<body><div id="app">{{ msg }}     <h2>{{ web.url }}</h2><h2>{{ web.user }}</h2><!-- 3.v-on 为button按钮绑定点击事件 --><!-- 4.当点击页面的按钮时，原网址就会进行修改并显示在页面上 --><button v-on:click="eidt">修改</button><br><!-- 5.v-on:的简写为 @ --><button @click="eidt">修改简写版</button></div><script type="module">// 以模块化开发为例import { createApp,reactive } from './vue.esm-browser.js'createApp({setup(){// 设置响应的数据和方法const web = reactive({url:'baidu.com',user: 0})// 1.定义一个web的方法来修改网站的网址const eidt = () => {web.url = 'www.baidu.com';}return {msg:'success',  // 响应成功web,  // 响应式数据// 2.方法添加至return语句来返回eidt}}}).mount("#app")  // 将其挂载到 div#app 元素中</script>
</body>

2. 按键修饰符

以按键 enter 为例

按下按键时 user 自动添加响应数量

<body><div id="app">{{ msg }}     <h2>{{ web.url }}</h2><h2>{{ web.user }}</h2><button v-on:click="eidt">修改</button><br><button @click="eidt">修改简写版</button><hr><!-- 3.给add方法设置一个事件 当按下enter键并松开(keyup)时 调用add方法 通过return返回结果 --><input type="text" @keyup.enter = "add(40,60)"><!-- 4.按下文本框时 有焦点 有光标闪烁，此时再按下enter并松开才有效，不点击文本框无效 --></div><script type="module">// 以模块化开发为例import { createApp,reactive } from './vue.esm-browser.js'createApp({setup(){// 设置响应的数据和方法const web = reactive({url:'baidu.com',user: 0})// 1.设置一个add方法，来计算a,b两个网站新增的用户数const add = (a,b) => {web.user = a+b;}const eidt = () => {web.url = 'www.baidu.com';}return {msg:'success',  // 响应成功web,  // 响应式数据eidt,// 2.返回add方法add}}}).mount("#app")  // 将其挂载到 div#app 元素中</script>
</body>

此时按下按键enter，页面显示100，但是反复点击并松开enter一直是100不变

怎么样才能每松开一次enter就+100

可以直接在add方法中设置，每按一次在原先基础上 +100

const add = (a,b) => {web.user += a+b;
}

除了回车外，还可以设置其他比如：空格、Tab键、任意键、组合键

空格： <input type="text" @keyup.space="add(20, 30)"> <br>

Tab： <input type="text" @keydown.tab="add(10, 20)"> <br>

keydown原因：按下Tab后，光标会下移而不在本文本框内

任意键w： <input type="text" @keyup.w="add(5, 10)"> <br>

组合键：@keyup.X.Y=" 事件 "

Ctrl + Enter <input type="text" @keyup.ctrl.enter="add(40, 60)"> <br>

Ctrl + A <input type="text" @keyup.ctrl.a="add(20, 30)">

3. 显示和隐藏 v-show

<body><div id="app"><!-- 当前显示状态是true / false --><h3>{{ web.show }}</h3> <!-- 当前显示状态 --><!-- 6.标签p设置了v-show 来控制一段文字的显示状态 --><!-- 7.web.show代表布尔值 决定是否显示  --><p v-show="web.show">baidu.com</p><!-- 4.设置一个button来切换show，每次点击按钮后调用toggle方法 并将结果通过return返回给标签p --><!-- 5.可以打开控制台观察,点击按钮后给p标签添加了一个CSS属性 style="display:none;" 且同时web.show修改为flase --><button @click="toggle">点击切换显示状态</button></div><script type="module">// 模块化开发为例import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {// 定义一个reactive类型的响应数据const web = reactive({show: true  // 布尔类型的show 初始为true})// 1.定义一个可以切换show状态的方法 toggleconst toggle = () => {web.show = !web.show  // 2.将!show赋值给show 实现每次点击按钮都是之前状态的反状态}return {web,toggle   // 3.返回toggle方法}}}).mount("#app")</script>
</body>

4. 条件渲染 v-if

<body><div id="app"><!-- 当前显示状态是true / false --><h3>{{ web.show }}</h3> <p v-show="web.show">baidu.com</p><!-- 1.新增一个p标签 并添加 v-if--><!-- v-if是渲染条件,条件为true时渲染 false时不渲染 --><!-- 虽然v-if也可以切换显示状态 但是不适合频繁切换 --><!-- 可以F12发现,每次切换状态,会在DOM中添加或删除元素 --><p v-if="web.show">www.baidu.com</p><button @click="toggle">点击切换显示状态</button></div><script type="module">// 模块化开发为例import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {// 定义一个reactive类型的响应数据const web = reactive({show: true  // 布尔类型的show 初始为true})// 可以切换show状态的方法 toggleconst toggle = () => {web.show = !web.show  // 将!show赋值给show 实现每次点击按钮都是之前状态的反状态}return {web,toggle}}}).mount("#app")</script>
</body>

5. 条件渲染if-else

其实就是各种条件判断来实现显示不同状态

<body><div id="app"><!-- 当前显示状态是true / false --><h3>{{ web.show }}</h3> <p v-show="web.show">baidu.com</p><p v-if="web.show">www.baidu.com</p><button @click="toggle">点击切换显示状态</button><!-- 下面是 if else 的应用 --><!-- 2.在页面定义一个新标签:新网站,并为其添加 v-if --><p v-if="web.user < 1000">新网站</p><!-- 当用户数小于1000时显示新网站 --><!-- 3.再定义一个新网站:优秀网站,条件为用户 [1000,10000) --><p v-else-if="web.user >= 1000 && web.user < 10000">优秀网站</p><!-- 4.资深网站标签,条件为除了上述所有条件的其他条件 --><p v-else=></p></div><script type="module">// 模块化开发为例import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {// 定义一个reactive类型的响应数据const web = reactive({show: true,  // 布尔类型的show 初始为true// 1.响应式数据添加一个元素 用户useruser: 500  // 初始为500})// 可以切换show状态的方法 toggleconst toggle = () => {web.show = !web.show  // 将!show赋值给show 实现每次点击按钮都是之前状态的反状态}return {web,toggle}}}).mount("#app")</script>
</body>

本文介绍vue3中的一些方法的操作。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/38042.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！