vue用computed获取姓和名

最新推荐文章于 2023-07-27 11:24:43 发布
最新推荐文章于 2023-07-27 11:24:43 发布
阅读量745 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43853424/article/details/88350979
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="fun">
    <select name="" id="" v-model="full">
        <option>孙悟空</option>
        <option>猪八戒</option>
        <option>沙悟净</option>
    </select>
    <p>姓名：{{full}}</p>
    <p>姓：{{firstName}}</p>
    <p>名：{{lastName}}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#fun",
        data: {
            firstName: "孙",
            lastName: "悟空"
        },
        computed: {
            full: {
                get() {
                    return this.firstName + this.lastName;
                },
                set(val) {
                    let fullName = val;
                    this.firstName = fullName[0];   
                    this.lastName = fullName.slice(1,);
                }
            }
        }
    })
</script>
</html>
蔡大毛
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
5--vue实现中文的姓和名分开显示
xu_ze_qin的博客
04-28 580
直接上代码—— <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script> <title></title> &lt...
vue获取计算机名,Flex通过JS获取客户端IP和计算机名的实例代码
weixin_28995139的博客
07-26 1213
首先说明一下，用JS方式获取不是调用webservices和httpservices。在我们每一个FLex web工程中，都有那么一个文件夹bin-debug，里面有个index.html文件，我的个人理解是这样的，首先网页运行的时候，mxml的文件会被编译为swf，那么swf如何在浏览器中展现，就是通过这个html文件，相当于在html文件中嵌入了一个swf的object组件。 www.jb51...
获取计算机名称
weixin_30765319的博客
02-04 290
function GetComputerName:String; //获取计算机名称//引用winsockvar wVersionRequested : WORD; wsaData : TWSAData; p : PHostEnt; s : array[0..128] of char;begin try wVersionRequested := MAKEWORD(1, 1); //创...
VUE搜索姓名
王二的博客
11-01 428
html代码块 <div id="app"> <input type="text" v-model="keyword" placeholder="请搜索姓名"/> <table border="1" cellspacing="0" cellpadding="0"> <tr> <th>姓名</th> <th>性别</th> <th...
Vue学习笔记——computed计算属性(用三种方法实现姓名的拼接，及其区别)
qq_44862029的博客
03-02 1070
一.姓名案例效果1.姓名案例，用插值语法实现2.姓名案例，用methods实现3.姓名案例，用计算属性(computed)实现二.总结 一.姓名案例效果 需要实现的效果：输入姓和名，动态的显示全名 修改前 修改后 1.姓名案例，用插值语法实现 <div class="root"> 姓：<input type="text" v-model="firstName"><br> 名：<input type="text"
详解vue中computed 和 watch的异同
08-30
Vue 中 computed 和 watch 的异同 在 Vue 中，computed 和 watch 是两个非常重要的概念，它们都可以用来...了解 computed 和 watch 的异同是非常重要的，它可以帮助我们更好地使用 Vue 框架，提高开发效率和代码质量。
vue中watch和computed的区别与使用方法
10-14
在 Vue 中，`watch` 和 `computed` 都是用来处理数据变化的机制，但它们之间存在显著的差异和特定的使用场景。 **计算属性（Computed）** 计算属性是基于它们的响应式依赖进行缓存的。这意味着，当你在模板中使用一...
vue中computed 和 watch的异同！
04-02
3. getter 和 setter：`computed` 支持 getter 和 setter，getter 在获取值时触发，setter 在设置值时触发，提供了对计算属性更细粒度的控制。 4. 示例： ```javascript new Vue({ data: { firstName: 'Den', ...
Vue中computed及watch区别实例解析
10-15
在Vue.js框架中，`computed`和`watch`都是用于处理数据变化的机制，但它们在功能和使用场景上存在显著的区别。以下是关于这两个概念的详细解析。 **计算属性（Computed）** 计算属性`computed`主要用于创建基于现有...
vue计算属性computed的使用方法示例
10-17
总之，Vue的`computed`属性是实现数据绑定和计算逻辑的重要工具，它可以极大地提高代码的可读性和效率。通过合理使用，你可以创建出更灵活且高效的Vue应用。在实际开发中，根据需求选择合适的计算属性形式，并确保...
以IP来获取客户端电脑名称(一句代码实现)
01-02
公司的域环境内，要求获取客户端的电脑名称，其实程序原开始，只是要求 获取客户端IP地址 后来演变成要求显示客户端的电脑名称。作为开发者，只有不停地实现客户的要求。 其实既然IP获取到了，那可以轻易以IP来获取电脑名称： 代码如下: System.Net.Dns.GetHostEntry(“xxx.xxx.xxx.xxx”).HostName 您可能感兴趣的文章:ASP.NET获取真正的客户端IP地址的6种方法获取客户端电脑日期时间js代码(jquery)ASP 获取腾讯IP地址的代码IP138 IP地址查询小偷实现代码asp.net 通过指定
获取客户端MAC，IP 计算机名的方法
08-22
教你怎么样获取客户端的MAC IP 计算机名的方法
test-electron-vue用来获取电脑mac地址
04-20
下载资源后请注意输入cnpm i 获取依赖 ，然后在项目根目录下执行cnpm run electron:serve即可。注意：需要环境vuecli3+，cnpm , npm , node
winsocket编程获得本机IP地址和计算机名称
06-06
利用Winsock网络信息获取函数编写一个主机名、IP地址的获取GUI程序
vue 项目获取本地IP+用户名称
qq_46344419的博客
06-14 1543
vue 项目获取本地IP+用户名称
【vue+js】PC端获取主机id、IP地址、主机名
最新发布
qq_24385297的博客
07-27 4378
3.在你需要的地方直接使用process.env.VUE_APP_HOST（IP地址）、process.env.VUE_APP_NAME（主机名）、process.env.VUE_APP_MACHINEID（设备id）需求描述：在用户登录时，前端需要获取主机id、IP地址、主机名，传给后端。1.安装包 npm i node-machine-id。2.在vue.config.js文件中复制粘贴如下代码。打印出来是下图这个样子。
vue获取计算机设备号
qq_34716929的博客
11-17 2485
在vue.config.js中写入。
Vue中用Watch实现姓名案例
zhao123456asd的博客
07-08 326
Vue中watch实现姓名案例
Vue - 姓名案例
qq_39123467的博客
10-12 495
Vue - 姓名案例
uniapp 使用Vue的 computed
06-02
Uniapp 是基于 Vue 的框架，因此可以使用 Vue 的 computed 属性进行计算属性的定义。在 Uniapp 中，我们可以在页面的 script 标签中使用 computed 属性来定义计算属性，例如： ```javascript export default { data() { return { num1: 10, num2: 20 } }, computed: { sum() { return this.num1 + this.num2 } } } ``` 在上面的代码中，我们定义了两个变量 num1 和 num2，并使用 computed 属性定义了一个计算属性 sum，它返回 num1 和 num2 的和。在页面中，我们可以直接使用 sum 变量来获取计算结果。 ```html <template> <div>{{ sum }}</div> </template> ``` 这样就可以在页面中渲染出计算结果了。需要注意的是，在计算属性中，我们只需要定义计算逻辑，而不需要关心数据的更新，Vue 会自动帮我们处理数据的更新。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值