vue姓名动态输入三种方式、前端密码加密

在vue所有用到的属性值能被调用到的都需要在data里声明
在线操作

<!DOCTYPE html>
<html><head><meta charset="utf-8"><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://cdn.bootcss.com/jquery/2.2.2/jquery.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script src="md5.min.js" type="text/javascript" charset="utf-8"></script><title>名字动态输入</title></head><body><div id="app"><h2>fullname -> {{ fullname }}</h2><span>firstname:</span><input type="" name="" id="" value="" v-model="firstname" placeholder="输入姓"/><br><span>lastname</span><input type="" name="" id="" value="" v-model="lastname" placeholder="输入名字"/><hr ><h4> fullname_method() -> {{ fullname_method() }}</h4><h3> fullname_watch -> {{ fullname_watch }}</h3><hr ><h1>密码加密</h1><h2> pwd -> {{ pwd }}</h2><input type="" name="" id="" value="" placeholder="请输入密码" v-model="pwd"/><h3>com_pwd -> {{ com_pwd }}</h3><h3>pwd_hash -> {{ pwd_hash }}</h3></div><script type="text/javascript">vm = new Vue({el:'#app',data:{firstname:'',lastname:'',pwd:'',pwd_hash:'',fullname_watch:'',},methods:{fullname_method:function(){return this.firstname + this.lastname}},watch:{firstname:function(val){this.fullname_watch = val + this.lastname},lastname:function(val){this.fullname_watch = this.firstname + val}},computed:{com_pwd:{get:function(){return this.pwd},set:function(val){alert(val)this.pwd_hash = md5(val)}},fullname:function(){return this.firstname + this.lastname}}})</script></body>
</html>

vue姓名动态输入三种方式、前端密码加密相关推荐

Vue页面刷新的三种方式
vue页面刷新的三种方式由于功能需求,需要离开页面前告知用户是否需要丢弃未保存的数据,这时候切换的菜单会失效,但是菜单依然会高亮错误.所以要进行一次页面刷新. 方法一原地页面刷新 this.$ro ...
【vue】vue组件传值的三种方式
前言 vue的组件传值分为三种方式:父传子.子传父.非父子组件传值引用官网的一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递父组件通过 prop 给子组件下发数据,子组件通过事件 ...
Vue路由传参三种方式
Vue路由传参三种方式 params传参路由属性配置传参 query传参一.params传参 this.$router.push({ name:"admin", //这里的pa ...
vue三种ajax请求方式,vue请求数据的三种方式
请求数据的方式: vue-resource 官方提供的 vue的一个插件 axios fetch-jsonp 一,vue-resource请求数据介绍:vue-resource请求数据方式是官方提供 ...
Vue刷新页面的三种方式
我们在写项目的时候,经常会遇到,用户执行完某个动作,改变了某些状态,需要重新刷新页面,以此来重新渲染页面.如:用户登录成功.增加.删除.更新等. 原始方法: location.reload(); vu ...
vue实现动态路由俩种方式
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.[[点击跳转到网站.]] 创建文件目录在router文件中引入一级路由以及详情页路由 import Vue from ...
Vue创建组件的三种方式
1.使用 Vue.extend 来创建全局的Vue组件 <div id="app"><!-- 如果要使用组件,直接,把组件的名称,以 HTML 标签的形式,引入到 ...
Excel绘制动态图三种方式
目录一.项目背景二.实现过程一.项目背景 Excel是一款强大的数据分析统计工具,当数据量不太大或者需要快捷处理数据时, 我们经常要用到它,在面试时也会被经常问到一些函数功能和绘制图形等问题.本 ...
【Java入门练习100例】02.键盘输入——三种方式
Vue组件传值的三种方法
Vue组件传值的三种方式 1.父传子父传子使用props: 1.父组件:即在使用的子组件标签上,自定义一个绑定数据,这里我使用的是"mymsg",将父组件的msg绑定在其上. 2 ...

vue姓名动态输入三种方式、前端密码加密

vue姓名动态输入三种方式、前端密码加密相关推荐

最新文章

热门文章