插值语法示例：插值语法--实现信息拼接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>插值语法--实现信息拼接</title>
<script type="text/javascript" src="../Js/vue.js"></script>
</head>
<body>
<div id="root">
<button @click="method">查询</button>
<hr>
<!-- 单向绑定 v-bind写法 -->
<input type="text" :value="nickname"><br />
<input type="text" v-bind:value="nickname">
<hr>
<!-- 双向数据绑定：v-model写法 -->
<input type="text" v-model:value="nickname">
<input type="text" v-model="nickname"><br />
姓名：{{name}}--昵称{{nickname}}
</div>
</body>
</html>
<script type="text/javascript">
//console.log(vm)
const vm = new Vue({
el: '#root',
data: {
name: '张三',
nickname: '张大师'
},
methods: {
showInfo () {
},
showParamsInfo (event, str) {
},
},
})
</script>
通过method的方式实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>method--实现信息拼接</title>
<script type="text/javascript" src="../Js/vue.js"></script>
</head>
<body>
<div id="root">
<!-- 双向数据绑定：v-model写法 -->
<input type="text" v-model:value="nickname">
<input type="text" v-model="nickname"><br />
<hr>
<!-- 方法调用 -->
<span>
全名： {{fullName()}}
</span>
</div>
</body>
</html>
<script type="text/javascript">
//console.log(vm)
const vm = new Vue({
el: '#root',
data: {
name: '张三',
nickname: '张大师'
},
methods: {
fullName () {
return this.name + '|' + this.nickname
},
showParamsInfo (event, str) {
},
},
})
</script>
标签：13,Vue,--,vm,插值,nickname,method From： https://www.cnblogs.com/YYkun/p/18030010