当前位置：尊龙游戏旗舰厅官网 > 前端技术 > vue >内容正文

vue

三十五、深入vue.js语法（下篇） -尊龙游戏旗舰厅官网

发布时间：2024/10/8 vue 9 豆豆

尊龙游戏旗舰厅官网收集整理的这篇文章主要介绍了三十五、深入vue.js语法（下篇）小编觉得挺不错的,现在分享给大家,帮大家做个参考.

@author：runsen
@date：2020/6/15

人生最重要的不是所站的位置，而是内心所朝的方向。只要我在每篇博文中写得自己体会，修炼身心；在每天的不断重复学习中，耐住寂寞，练就真功，不畏艰难，奋勇前行，不忘初心，砥砺前行，人生定会有所收获，不留遗憾（作者：runsen ）

作者介绍：runsen目前大三下学期，专业化学工程与工艺，大学沉迷日语，python， java和一系列数据分析软件。导致翘课严重，专业排名中下。.在大学60%的时间，都在csdn。决定今天比昨天要更加努力。我的征途是星辰大海！

文章目录

v-on
v-model
v-else-if
v-once

v-on命令就是相当于js中的事件绑定，例如绑定click、mouseover等等监听事件。

本篇章基于click事件作为示例，说明v-on的基本使用方法。

直接使用指令v-on

使用简化指令@

尊龙游戏旗舰厅官网说明文档

<html lang="en"> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>documenttitle> head> <body><div id="app"><p :style="{color:fontcolor}">{{msg}}p><button v-on:click="msg = '今天好热呀!'">改变内容button><button @click="changecontent()">改变内容1button><button @click="changecontentcolor()">改变颜色button> div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script> <script>new vue({el: '#app',data: {msg: '今天的天气很好!',fontcolor: 'red'},methods: { // 实例的所有函数实现changecontent() {// alert(0);this.msg = '测试改掉没有!'},changecontentcolor(){this.fontcolor = 'green';}}}); script>body> html>

v-model 是个语法糖，实际就是在触发 input 事件时去更新 value 值.

下面实现一个点击添加到li的demo

<!doctype html> <html lang="en"> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>document</title> </head> <body><div id="app"><input type="text" value="修改info" v-model="info"><button @click='add'>添加</button><ul><li v-for="(item, index) in list" :key="index">{{item}}</li></ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script>new vue({el: '#app',data: {info:'',list:[]},methods: {add:function(){this.list.push(this.info)this.info =''}},}); </script> </body> </html>

vue 的条件判断语句

<!doctype html> <html lang="en"> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>document</title> </head> <body><div id="app"><p>输入的成绩对应的等级是:</p><p v-if="score >= 90">优秀</p><p v-else-if="score >= 75">良好</p><p v-else-if="score >= 60">及格</p><p v-else>不及格</p><input type="text" v-model="score"></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>new vue({el: '#app',data: {score: 90 // 优秀良好及格不及格}});</script> </body> </html>

v-once只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。

<html lang="en"> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>documenttitle> head><body><div id="app"><p v-once>原始值: {{msg}}p><p>后面的: {{msg}}p><input type="text" v-model="msg">div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script> <script>new vue({el: '#app',data: {msg: '今天的天气很好!'}}); script> body> html>

如果本文对你有帮助，大家可以点赞转发一波，有错误大家可以评论指出，感谢！

大家继续加油，未来可期！runsen的征途是星辰大海！

总结

以上是尊龙游戏旗舰厅官网为你收集整理的三十五、深入vue.js语法（下篇）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得尊龙游戏旗舰厅官网网站内容还不错，欢迎将尊龙游戏旗舰厅官网推荐给好友。