vuejs表达式

最新推荐文章于 2024-04-29 15:31:08 发布
最新推荐文章于 2024-04-29 15:31:08 发布
阅读量114 收藏
点赞数
分类专栏： jsp vue Web 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42170152/article/details/104977505
版权
jsp 同时被 3 个专栏收录
3 篇文章 0 订阅
订阅专栏
Web
3 篇文章 0 订阅
订阅专栏
vue
1 篇文章 0 订阅
订阅专栏

文章目录

插值表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        {{message}} <!--vue的插值表达式 -->
        {{true ? "ok" : "no"}}
        {{number + 1}}
        {{number * 1.5}}
        <!-- 不支持的逻辑表达
        {{var a = 1;}}
        {{if(a=10){}}}
        -->
    </div>

    <script>
        new Vue({
            el: "#app", //由vue接管id为app的区域
            data: {
                message: "Hello Vue!",
                number:100
            }
        });
    </script>
</body>
</html>

v-on点击事件

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        {{message}} <!--vue的插值表达式 --><br>
        <button v-on:click="fun1('Vue v-on')">点击</button>
    </div>

    <script>
        new Vue({
            el: "#app", //由vue接管id为app的区域
            data: {
                message: "Hello Vue!",
                number:100
            },
            methods:{
                fun1:function (msg) {
                    this.msg = msg;
                    alert("点击功能" + msg);
                }
            }
        });
    </script>
</body>
</html>

键盘事件

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
<!--        <input type="text" onkeydown="showKeyCode()">-->
        Vue:<input type="text" v-on:keydown="fun($event)">
    </div>

    <script>
        //传统方法
        /**
        function showKeyCode(){
            var key = event.keyCode;
            alert(key);
        }
         */
        new Vue({
            el: "#app", //由vue接管id为app的区域
            methods:{
                /* $event 是 vue的时间对象 */
                fun:function (event) {
                    var keyCode = event.keyCode;
                    if(keyCode < 48 || keyCode > 57){
                        event.preventDefault();//不让键盘起作用
                    }
                }
            }
        });
    </script>
</body>
</html>

鼠标事件

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
<!--        <div @mouseover="fun1" id="div">-->
<!--            <textarea @mouseover="fun2($event)">这是一个文件域</textarea>-->
<!--        </div>-->

<!--        <div onmouseover="divmouseover()" id="div">-->
<!--            <textarea onmouseover="textareamouseover()">这是一个文件域</textarea>-->
<!--        </div>-->
        <div v-on:mouseover="fun1" id="div">
            <textarea v-on:mouseover="fun2($event)">这是一个文件域</textarea>
        </div>
    </div>

    <script>
        new Vue({
            el:"#app",
            methods:{
                fun1:function () {
                    alert("鼠标悬停在div上了");
                },
                fun2:function (event) {
                    alert("鼠标悬停在textarea上了")
                }
            }
        })
        //传统方法
        /**
        function divmouseover() {
            alert("鼠标移动到div上")
        }
        function textareamouseover() {
            alert("鼠标移动到text上")
            event.stopPropagation();
        }
         */
        /**
        function showKeyCode(){
            var key = event.keyCode;
            alert(key);
        }
         */

    </script>
</body>
</html>

事件修饰符

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!--
        @submit.prevent 阻止事件发生
        -->
        <form @submit.prevent action="http://www.alibaba.com" method="post">
            <input type="submit" value="提交">
        </form>
    </div>

    <script>
        new Vue({
            el:"#app"
        })
    </script>
</body>
</html>

on-html text …

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <div id="div1"></div>
        <div id="div2"></div>
        <div v-text="message"></div>
        <div v-html="message"></div>
        <font size="5" :color="ys1">pu</font>
        <font size="5" :color="ys2">pu</font>
    </div>

    <script>
        new Vue({
            //插值表达式不可用于html标签的属性取值，必须使用v-bind绑定
            el:"#app",
            data:{
                message:"<h1>Hello Vue</h1>",
                ys1:"red",
                ys2:"green"
            }
        })

        //js
        window.onload = function () {
            document.getElementById("div1").innerHTML="<h1>Hello</h1>"
            document.getElementById("div2").innerText="<h1>Hello</h1>"
        }
    </script>
</body>
</html>

按键修饰符

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        Vue:<input type="text" v-on:keydown.enter="fun1">
    </div>

    <script>
        new Vue({
            //插值表达式不可用于html标签的属性取值，必须使用v-bind绑定
            el:"#app",
            methods:{
                fun1:function () {
                    alert("按下的是回车！")
                }
            }
        })
    </script>
</body>
</html>

v-for

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in arr">{{item}} = {{index}}</li>
        </ul>
        <ul>
            <li v-for="(key,value) in product">{{key}} : {{value}}</li>
        </ul>
        <table border="1">
            <tr>
                <td>序号</td>
                <td>编号</td>
                <td>名称</td>
                <td>价格</td>
            </tr>
            <tr v-for="(p,index) in products">
                <td>{{index+1}}</td>
                <td>{{p.id}}</td>
                <td>{{p.name}}</td>
                <td>{{p.price}}</td>
            </tr>
        </table>
    </div>

    <script>
        new Vue({
            //插值表达式不可用于html标签的属性取值，必须使用v-bind绑定
            el:"#app",
            data:{
                arr:[1,2,3,4,5],
                product:{
                    id:1,
                    name:"phone",
                    price:500

                },
                products:[
                    {id:1,name:"mac",price:10000},
                    {id:2,name:"phone",price:3000},
                    {id:3,name:"tv",price:4000}
                ]
            }
        })
    </script>
</body>
</html>

v-model

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <form action="" method="post">
            用户名：<input type="text" name="username" v-model="user.username"><br>
            密码：<input type="password" name="password" v-model="user.password"><br>
        </form>
    </div>

    <script>
        new Vue({
            //插值表达式不可用于html标签的属性取值，必须使用v-bind绑定
            el:"#app",
            data:{
                user:{
                    username:"test",
                    password:"1234",
                }
            }
        })
    </script>
</body>
</html>
pupy
关注
专栏目录
vue入门基础的各个基本表达式
dailingroom的博客
01-05 2244
今天新开启Vue学习： Vue的el挂载点只能支持双标签而不能支持双标签 不要挂在body上 三个问题： Vue实力的作用范围是什么呢？ Vue会管理el选项命中的元素及其内部的后代元素 是否可以使用其他的选择器？ 可以使用其他的选择器，但是建议使用ID选择器 是否可以设置其他的dom元素呢？ 可以使用其他的双标签，但是不要使用html和body Vue使用复杂类型的数据： 1.当写 这样的数据类型的数据时，用点取，例如school.name,取出来的是‘黑马程序员’这个信息 2.当写的是 ，这是数组类型
jsp中使用vuejs+element-ui+vuejs第三方组件
02-17
3. **与JSP数据交互**: 可以通过EL表达式（Expression Language）将JSP的后端数据传给Vue实例，或通过Ajax请求获取数据。 **引入Element-UI** 1. **安装Element-UI**: 如果是新项目，可以在项目根目录下运行`npm ...
VUE基础、表达式和指令
N_Ending的博客
11-29 1071
1、Vue实例挂载(el)的标签 每个Vue实例通过el配置挂载的标签，该标签可以通过id或者是class挂载。 实例上的属性和方法只能够在当前实例挂载的标签中使用。 <div id="app"> <h1>{{message}}</h1> </div> <div class="vueClz"> <h1>{{message...
【Vue】简单表达式
luobifeiyeshi0的博客
05-06 307
插值表达式{{}}，可以在前后插入一些内容，插值表达式可以进行一些简单的字符串。不同点：v-text 不会解析富文本；v-html 可以解析富文本。4.key在使用v-for的时候都需要去设置key。v-model 数据双向绑定，绑定的是表单控件。v-bind 元素的属性绑定，简写 “ ：”key只能是字符串或数字，key必须是唯一的。v-show设置display:none。v-on 事件的绑定，简写“ @ ”频繁切换的时候可以使用v-show。只修改一次的时候可以使用v-if。
Vue的表达式和常用指令
chifudai0188的博客
08-05 410
1.VueJS表达式 VueJS使用 表达式（ {{表达式}} ）把数据绑定到 HTML。 1.1.1.表达式语法 VueJS表达式写在双大括号内：{{ expression }}。 VueJS表达式把数据绑定到 HTML，这与 v-html指令有异曲同工之妙。 VueJS将在...
vue中使用常用正则表达式
12-09 4273
3~20个字符，可使用字母、数字、下划线，需以字母开头：/^[a-zA-Z]\w{2,19}$/
VueJS-L-：学习VueJS
02-14
- **模板语法**：在HTML中使用指令和表达式结合，实现数据驱动视图。 - **生命周期**：Vue实例有其特定的生命周期，包括创建、挂载、更新和销毁等阶段。 4. **组件开发**： - **组件定义**：定义组件包括模板、...
基于Vuejs和Element的注册插件的编写方法
10-19
验证函数使用正则表达式来确保用户输入的数据满足特定格式，例如名字需符合常见的中文字符格式。每个验证函数都接受三个参数：rule（当前规则）、value（字段值）和callback（回调函数）。在验证成功时调用callback...
vuejs指令详解
10-20
首先，`v-if` 指令是一个条件指令，根据表达式的值决定是否渲染元素。如果表达式为 `false`，则该元素及其所有子元素都不会出现在DOM中。相反，如果表达式变为 `true`，元素会被重新插入。`v-if` 通常适合于条件不常...
【Vue】模板语法 —— 表达式、插值、指令
2401_84092727的博客
04-13 1029
资料过多，篇幅有限，需要文中全部资料可以点击这里获取前端面试资料PDF完整版！自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！**[外链图片转存中…(img-cJQWRwOL-1712997985507)]由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
VUE表达式
张晨光老师的播客
01-03 2053
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;VUE表达式&lt;/title&gt; &lt;script src="js/vue.min.js"&gt;&lt;/script&gt; &a
Vue初体验（三），表达式的使用
热门推荐
mapbar_front的博客
05-14 1万+
1、表达式是使用{{}}双重大括号绑定起来的js代码块，和angular不同的是，在vue中，提供了完全的JavaScript表达式支持。 使用方式：在data中申明变量，在{{}}中进行js操纵。 最简单的表达式就是文本。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue学习</t
VUE之正则表达式全集整理
hulinhulin的专栏
09-28 2580
VUE正则表达式小结
vue的指令-vue的学习之旅
weixin_43131450的博客
05-15 746
什么是指令？ 指令 (Directives) 是带有 v- 前缀的特殊特性。 指令特性的预期值是：单个 JavaScript 表达式。 指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。 例如 v-on，代表绑定事件。 1.插值表达式 1.1花括号 格式：{{表达式}} 说明： 该表达式支持 JS 语法，可以调用 js 内置函数（必须有返回值） 表达式必须有返回结果。例如 1 +1，没有结果的表达式不允许使用，如：let a = 1 + 1; 可以直接获取 Vue 实例中定
Vue的模板语法(双大括号表达式、插值、v-bind 指令、v-on、指令缩写)
Argonaut_的博客
02-20 5639
相信模板语法大家多少都有所接触，例如百度模板引擎、ejs 等等。同样 Vue.js 也使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析，通俗的讲 Vue 模板语法就是在使用 Vue.js 开发时，你可以写在 HTML 元素上的操作语法，让你开发更高效，例如：绑定样式，循环出元素列表等。
vue中三元运算， style、class、type、 event等多种场景示例
大剑师兰特的GIS世界
09-12 3006
在vue的项目中，我们经常用三元运算来简化if-else的操作，这样会减少代码量，阅读起来也比较通畅。我们在下面的介绍中，会介绍单条件和多条件的场景，也会介绍style，type，class，event，文本内容中的三元运算示例。
Vue的组件化
最新发布
2401_84446548的博客
04-29 227
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】Right总结来说，面试成功=基础知识+项目经验+表达技巧+运气。
vue表达式
DVchengxuyuan的博客
12-28 1116
插值表达式： 语法：{{数据/表达式}} 功能：向页面渲染数据或表达式的结果。 插值表达式会自动将vue实例中的data属性中的数据取出，渲染到页面上。 算术运算： + - * / % 调用方法 Math.floor Date.now() 三元表达式 注意:[千万不要写 js语句。] 比如： var a = 10+20; if else 语句等。 <div id="app"> <!-- ...
VueJS 2.0 学习重点：组件、数据绑定与指令解析
`v-bind`用来动态地绑定一个或多个属性，如绑定`href`属性到表达式`url`。`v-on`则用于事件监听，当指定的事件触发时，会执行对应的函数。例如，点击事件的监听可以写为`<a @click="doSomething"></a>`。 值得注意...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值