脚本宝典收集整理的这篇文章主要介绍了显示数据，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
1、显示数据
在双标签中显示数据要通过{{ }}来完成数据显示
在表单输入框中显示数据要使用v-model来完成数据显示
显示标签数据使用v-htML
<!DOCTYPE html> <html lang="en"> <head> <;meta charset="UTF-8"> <tITle>Title</title> <script src="https://cdn.bootcdn wangt.cc /ajax/libs/vue/2.6.13/vue.js"></script> </head> <body> <div id="app"> <h3>{{title}}</h3> <input type="text" v-model="title"> <p> <span>{{link}}</span> <span v-html="link"></span> </p> </div> <script> let vm = new Vue({ el:"#app", data:{ title:"我的vue", link:'<a href="http://www.baidu wangt.cc ">百度</a>', } }) </script> </body> </html>
总结：
1. 可以在普通标签中使用{{ }} 或者 v-html 来输出data里面的数据
<h1>{{message}}</h1>
2. 可以在表单标签中使用v-model属性来输出data里面的数据，同时还可以修改data里面的数据
<input type="text" v-model="username">
3. 双花括号仅用输出文本内容,如果要输出html代码,则不能使用这个.要使用v-html来输出。v-html必须在html标签里面作为属性写出来.
2、支持JS代码
在输出内容到普通标签的使用{{ }}，v-model或者v-html等vue提供的属性，或者 {{}} 都支持js代码。
<h1>{{str1.split("").reverse().join("")}}</h1>
<!-- 3.2 支持js的运算符-->
<h1>{{num1+3}}</h1>
<!-- 3.3 js还有一种运算符,三元运算符,类似于python里面的三元表达式
三元运算符的语法:
判断条件 ? 条件为true : 条件为false的结果
-->
<h1>num1和num2之间进行比较,最大值:{{ num2>num1?num2:num1 }}</h1>
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn wangt.cc /ajax/libs/vue/2.6.13/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{url}}</p>
<div>{{text}}</div>
<div v-html="text"></div>
<div>num是{{num % 2 == 0 ? '偶数' : '奇数'}}</div>
<div>num的下一个数字：{{num - 0 + 1}}</div>
<input type="text" v-model="num">
<input v-model="message">
<div>{{message.split("").reverse().join("")}}</div>
<input type="text" v-model="message.split('').reverse().join('')">
</div>
<script>
VAR vm = new Vue({
el: "#app", // 设置vue对象控制的标签范围
data: { // vue要操作的数据
url: "http://www.baidu wangt.cc ",
text: "<h1>大标题</h1>",
num: 100,
message: "abcdef",
},
})
</script>
</body>
</html>
以上是脚本宝典为你收集整理的显示数据全部内容，希望文章能够帮你解决显示数据所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。