码迷,mamicode.com
首页 > 其他好文 > 详细

取值操作

时间:2020-12-19 13:04:13      阅读:2      评论:0      收藏:0      [点我收藏+]

标签:message   org   charset   hello   title   sharp   view   导入   ros   

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<!--view层 模板-->
<div id="app">
    <p>{{message}}</p>
    <p v-once>{{message}}</p><!--v-once指令,在浏览器中修改属性的值的时候,被v-once修饰的,就不会进行改变了-->
    <p>{{goods[‘pop‘].a}}</p>

</div>


<!--导入vue.js-->
<script src="https://cdn.bootcss.com/vue/2.5.10/vue.min.js"></script>
<script>
    //let 变量   const 常量
    //model数据层
    //编程范式:声明式编程
    let vm=new Vue({
        el:"#app",//用于管理要挂载的元素
        data:{//定义数据
            message:"hello,vue!",
            goods:{
                ‘pop‘:{‘a‘:1,list:[‘yy1‘,‘yy2‘,‘yy3‘]},
                news:{‘a‘:2,list:[‘yy4‘,‘yy5‘,‘yy6‘]}
            }

        }
    });

</script>
</body>
</html>

  

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<!--view层 模板-->
<div id="app">
    <p>{{message}}</p>
    <p v-once>{{message}}</p><!--v-once指令,在浏览器中修改属性的值的时候,被v-once修饰的,就不会进行改变了-->
    <p>{{goods.pop.a}}</p>

</div>


<!--导入vue.js-->
<script src="https://cdn.bootcss.com/vue/2.5.10/vue.min.js"></script>
<script>
    //let 变量   const 常量
    //model数据层
    //编程范式:声明式编程
    let vm=new Vue({
        el:"#app",//用于管理要挂载的元素
        data:{//定义数据
            message:"hello,vue!",
            goods:{
                ‘pop‘:{‘a‘:1,list:[‘yy1‘,‘yy2‘,‘yy3‘]},
                news:{‘a‘:2,list:[‘yy4‘,‘yy5‘,‘yy6‘]}
            }

        }
    });

</script>
</body>
</html>

  

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<!--view层 模板-->
<div id="app">
    <p>{{message}}</p>
    <p v-once>{{message}}</p><!--v-once指令,在浏览器中修改属性的值的时候,被v-once修饰的,就不会进行改变了-->
    <p>{{goods.pop[‘a‘]}}</p>

</div>


<!--导入vue.js-->
<script src="https://cdn.bootcss.com/vue/2.5.10/vue.min.js"></script>
<script>
    //let 变量   const 常量
    //model数据层
    //编程范式:声明式编程
    let vm=new Vue({
        el:"#app",//用于管理要挂载的元素
        data:{//定义数据
            message:"hello,vue!",
            goods:{
                ‘pop‘:{‘a‘:1,list:[‘yy1‘,‘yy2‘,‘yy3‘]},
                news:{‘a‘:2,list:[‘yy4‘,‘yy5‘,‘yy6‘]}
            }

        }
    });

</script>
</body>
</html>

  

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<!--view层 模板-->
<div id="app">
    <p>{{message}}</p>
    <p v-once>{{message}}</p><!--v-once指令,在浏览器中修改属性的值的时候,被v-once修饰的,就不会进行改变了-->
    <p>{{goods[‘pop‘][‘a‘]}}</p>

</div>


<!--导入vue.js-->
<script src="https://cdn.bootcss.com/vue/2.5.10/vue.min.js"></script>
<script>
    //let 变量   const 常量
    //model数据层
    //编程范式:声明式编程
    let vm=new Vue({
        el:"#app",//用于管理要挂载的元素
        data:{//定义数据
            message:"hello,vue!",
            goods:{
                ‘pop‘:{‘a‘:1,list:[‘yy1‘,‘yy2‘,‘yy3‘]},
                news:{‘a‘:2,list:[‘yy4‘,‘yy5‘,‘yy6‘]}
            }

        }
    });

</script>
</body>
</html>

  

注意:

   <p>{{goods[‘pop‘].a}}</p>
   <p>{{goods.pop.a}}</p>
  <p>{{goods.pop[‘a‘]}}</p>
  <p>{{goods[‘pop‘][‘a‘]}}</p>



这几种写法都是能够取到值的。

取值操作

标签:message   org   charset   hello   title   sharp   view   导入   ros   

原文地址:https://www.cnblogs.com/dongyaotou/p/14136147.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!