1. 记得导入
<!-- 在线导入 -->
<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 本地导入 -->
<script src="node_modules/vue/dist/vue.js"></script>
1. 插值表达式{{}}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue插值表达式</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>我最喜欢的人是：{{ name }}</h1>
</div>
<script type="text/javascript">
//创建vue对象
var app = new Vue({
//让vue接管div标签
el:"#app",
//定义name值为"刘雨昕"，用于在div中引用
data:{
name:"刘雨昕"
}
});
</script>
</body>
</html>
2. v-text和v-html
v-text：<span v-text="msg"></span> <!-- 相当于<span>{{msg}}</span> -->
v-html：<span v-html="msg"></span> <!-- 相当于<span>{{msg}}</span> -->
v-text：把数据当作纯文本显示.
v-html：遇到html标签,会正常解析
3. v-model的原理
全网最详细的v-model讲解_zayyo的博客-CSDN博客
官方有说到，v-model的原理其实是背后有两个操作：
- v-bind绑定value属性的值；
- v-on绑定input事件监听到函数中，函数会获取最新的值赋值到绑定的属性中；
<div class="demo">
<textarea v-model="article" cols="30" rows="10"> </textarea>
<h2>article当前的值是：{{ article }}</h2>
</div>
<script type="text/javascript">
export default {
name: 'demo',
data() {
return {
article: "a"
}
}
}
</script>运行代码当textarea标签中用户输入的内容发生改名，相应的h1标签中的{{article}}也发生同样的更改。文章来源：https://www.toymoban.com/news/detail-622222.html
<input type="checkbox" v-model="sport" value="篮球" />篮球
<input type="checkbox" v-model="sport" value="足球" />足球
<input type="checkbox" v-model="sport" value="羽毛球球" />羽毛球球
<input type="checkbox" v-model="sport" value="兵乓球" />兵乓球
您的爱好有：{{ sport }}
<script type="text/javascript">
export default {
name: 'demo',
data() {
return {
message: "内容",
sex: '',
// 当要 默认选中时要填入值即可 例：sex='男'
// agree: false,
sport: [],
// fruits: '',
// fruits2: [],
// hobbies: [],
// origintobbies: ["篮球", "足球", "乒乓球", "羽毛球", "桌球"],
// age: 0,
// name: ''
}
}
}
</script>
form表单提交数据文章来源地址https://www.toymoban.com/news/detail-622222.html
<template>
<div class="from_box">
<form action="">
<input type="text" placeholder="请输入昵称" v-model="formMess.account">
<input type="password" placeholder="请输入密码" v-model="formMess.act_pwd">
<input type="text" placeholder="请输入手机号" v-model="formMess.phone">
</form>
<span class="but" @click="onSubmit()">提交</span>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: "from",
data() {
return {
formMess:{
"account":"",
"act_pwd":"",
"phone":""
}
};
},
methods: {
onSubmit() {
/* json格式提交： */
// let formData = JSON.stringify(this.formMess);
/* formData格式提交： */
let formData = new FormData();
for(var key in this.formMess){
formData.append(key,this.formMess[key]);
}
axios({
method:"post",
url:"xxxxxxx",
headers: {
"Content-Type": "multipart/form-data"
},
withCredentials:true,
data:formData
}).then((res)=>{
console.log(res);
});
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.from_box{
form{
width:90%;
margin: auto;
border:.01rem solid gray;
display: flex;
flex-wrap: wrap;
input{
width:80%;
height:.5rem;
margin-bottom: .2rem;
border:.01rem solid black;
height:.5rem;
}
}
.but{
font-size: .14rem;
margin-left:5%;
}
}
</style>
到了这里，关于vue学习之插值表达式{{}}与显示数据(v-text和v-html)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
