显示数据

1、显示数据

?
1
2
3
在双标签中显示数据要通过{{ }}来完成数据显示
在表单输入框中显示数据要使用v-model来完成数据显示
显示标签数据使用v-html

　　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <script src="https://cdn.bootcdn.net/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.com">百度</a>',
            }
        })
</script>
 
</body>
</html>

　　

总结：

?
1
2
3
4
5
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代码。

?
1
2
3
4
5
6
7
8
9
<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>

　　

例子：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/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.com",
            text: "<h1>大标题</h1>",
            num: 100,
            message: "abcdef",
        },
 
    })
</script>
</body>
</html>

　　

posted @   映辉  阅读(571)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示
SQL AI 助手