显示数据

1、显示数据

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

　　

<!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. 可以在普通标签中使用{{  }} 或者 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.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 @ 2021-10-01 20:40  映辉  阅读(587)  评论(0)    收藏  举报