Vue实例-内部指令

月亮不亮了---

已于 2022-03-14 17:28:57 修改

阅读量1.2k

点赞数 2

分类专栏：前端框架Vue 文章标签： vue.js elementui javascript

于 2022-03-14 17:15:29 首次发布

原文链接：https://blog.csdn.net/InJavaWeTrust/article/details/101063328

版权

前端框架Vue 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

代码：

<head>
    <title>内部指令</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id='app'> 
        <div v-for="(value,i) in list"> 
          索引:{{i}}。值:{{value}} 
        </div>
        <div v-for="(user,i) in olist"> 
          索引:{{i}}。名称:{{user.name}}。年龄:{{user.age}} 
        </div> 
        <div v-for="(value,i,index) in object"> 
          {{i}}:{{value}},索引:{{index}} 
        </div> 
        <div v-for="(value,i) in 5"> 
          索引:{{i}}。值:{{value}}
        </div> 
        <p>-----------------------</p>
        <p><input type="text" v-model="msg"></p> 
        <p><input type="text" v-text="msg"></p >
        <p v-text="msg"></p> 
        <p v-html="msg"></p> 
        <p><input type="text"v-bind:value='msg'></p > 
    </div>  
    <script>
        var vm = new Vue ({
            el:'#app',
            data :{
                msg :'<h1>双向数据绑定演示</h1>',
                list :['软件','14班','同学们好'],
                olist :[{name :"张三", age :18}, {name :"李四", age :19},{ name :"王五", age :20}],
                object:{
                    name:"王源",
                    ade:17,
                    phone:123456789,
                }
            }
        })
    </script>
</body>

实现截图：

月亮不亮了---

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue实例-内部指令

代码：<head> <title>内部指令</title> <script src="../vue.js"></script></head><body> <div id='app'> <div v-for="(value,i) in list"> 索引:{{i}}。值:{{value}} </div&gt
复制链接

扫一扫