Vue技术8.1姓名案例_插值语法实现
2023-09-27 14:26:24 时间
<!DOCTYPE html>>
<html>
<head>
<meta charset="UTF-8" />
<title>姓名案例_插值语法实现</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
姓:<input type="text" v-model="lastname"><br/><br/>
名:<input type="text" v-model="firstname"><br/><br/>
全名:<span>{{lastname}}-{{firstname}}</span>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
lastname:'张',
firstname:'三'
}
})
</script>
</html>
相关文章
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
- 【Vue 快速入门系列】github用户头像搜索小案例(VueResource、axios实战练习)
- 【Vue 快速入门系列】todoList案例小总结
- Vue 搜索案例:gitHub 用户搜索案例
- Vue 中的 Todo-list 案例
- vue/cli2.0优化 npm run build --report
- vue全局路由守卫beforeEach+token验证+node
- Vue.js:webpack.config.js配置和package.json配置学习笔记
- vue.js:使用v-bind通过JSON绑定多个class案例
- vue.js:使用v-html绑定HTML代码案例
- vue.js:父子组件的实训案例watch实现
- vue.js:父子组件的实训案例
- vue.js:简单购物车作业案例
- vue.js:哪些数组的方法是响应式的案例
- vue.js:用户登录切换的小案例小问题处理
- vue配合axios连接express搭建的node服务器接口_简单案例
- vue配置生产环境.env.production、测试环境.env.development
- Vue + ElementUI的电商管理系统实例16 数据报表
- Vue + ElementUI的电商管理系统实例08 角色列表
- vue-cli(vue脚手架)超详细教程
- 通过TodoList案例对比Vue.js的MVVM设计模式与JQuery的MVP设计模式
- Vue技术10.绑定样式
- Vue基础案例(水果搜索,购物车,todolist,留言板,跑马灯)
- IntegralUI Crack,Vue的原生Web组件
- 一文带你吃透Vue生命周期(结合案例通俗易懂)
- Vue.js实际开发案例
- vuejs高仿今日头条移动端 - vue-toutiao
- 使用Vue-Router 2实现路由功能
- vue-cli 3.0之跨域请求devServer代理配置
- Vue从入门到精通——第三章(中)Todo-list案例
- 前端学习之VUE基础五(Vue-Router):路由的基本概念、vue-router的基本使用、vue-router嵌套路由、vue-router动态路由匹配、vue-router编程式导航