thinkphp5控制器向+vue的data里传值
传一维数组传值
$array=['id'=>40,"cat_name"=>"明星产品"];
$MenuCats_info=json_encode($array,JSON_UNESCAPED_UNICODE);
$this->assign([
'MenuCats_info'=>$MenuCats_info,
]);
return view('index');
html里
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>vue</title>
<link rel="stylesheet" href="">
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript" src="__STATIC__/vue/vue.js"></script>
<script type="text/javascript" src="__STATIC__/vue/node_modules/axios/dist/axios.js"></script>
<style type="text/css">
.success{
color:green;
}
.error{
color:red;
}
</style>
</head>
<body>
<div id="vue">
<li v-for="v in news">
<span :class="v.status?'success':'error'">{{v.title}}</span>
<button v-on:click="changeStatus(v,false)" v-if="v.status">删除</button>
<button v-on:click="changeStatus(v,true)" v-if="!v.status">恢复</button>
</li>
{{MenuCats_info.cat_name}}
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: "#vue",
data:{
news:[
{title:'haha',status:true},
{title:"hehe",status:true}
],
//接收值 |raw 不转义输出
MenuCats_info:JSON.parse('{$MenuCats_info|raw}'),
}
});
</script>
</html>
效果:打印
明星产品
传二维数组:
php里:
$array=array(
['id'=>35,"cat_name"=>"吐司面包"],
['id'=>40,"cat_name"=>"明星产品"]
);
$MenuCats_info=json_encode($array,JSON_UNESCAPED_UNICODE);
$this->assign([
'MenuCats_info'=>$MenuCats_info,
]);
return view('index');
html里:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>vue</title>
<link rel="stylesheet" href="">
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript" src="__STATIC__/vue/vue.js"></script>
<script type="text/javascript" src="__STATIC__/vue/node_modules/axios/dist/axios.js"></script>
<style type="text/css">
.success{
color:green;
}
.error{
color:red;
}
</style>
</head>
<body>
<div id="vue">
<li v-for="v in news">
<span :class="v.status?'success':'error'">{{v.title}}</span>
<button v-on:click="changeStatus(v,false)" v-if="v.status">删除</button>
<button v-on:click="changeStatus(v,true)" v-if="!v.status">恢复</button>
</li>
<div v-for="vv in MenuCats_info">
{{vv.cat_name}}
</div>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: "#vue",
data:{
news:[
{title:'haha',status:true},
{title:"hehe",status:true}
],
//接收值 |raw 不转义输出
MenuCats_info:JSON.parse('{$MenuCats_info|raw}'),
}
});
</script>
</html>
thinkphp5控制器向+vue的data里传值的更多相关文章
- vue重置data里的值
this.$options.data() 这个可以获取原始的data值,this.$data 获取当前状态下的data,拷贝重新赋值一下就行了. Object.assign(this.$data, t ...
- VUE：data数据中，能被网页渲染出来的数据类型有哪些
我们都知道vue中,data里面的数据类型可以使任意类型. 但是能在网页上可以渲染出来的类型有哪些呢? 我们来看一下在VUE中data里的什么数据类型可以渲染出来. 我在下面列举了这些数据类型 显示结 ...
- Vue实例data对象里允许有哪些类型数据
做项目中遇到了data赋值的问题,总结了下常用的data赋值的数据类型.之前一直不确定是否能在data里写函数,实践证明data里也是可以对函数赋值的. export default { name: ...
- vue组件之间的传值方式
一.父组件向子组件传值方式 1.1父组件向子组件传数据方式 <!DOCTYPE html> <html lang="en"> <head> &l ...
- vue 组件-父组件传值给子组件
父组件通过属性,传值给子组件,子组件通过,props数组里的名称来接受父组件传过来的值. HTML部分: <div id="app"> <tmp1 :parent ...
- Vue.js之组件传值
Vue.js之组件传值 属性传值可以从父组件到子组件,也可以从子组件到父组件. 这里讲一下从父组件到子组件的传值 还以上次的demo为例,demo里有APP.vue是父组件,Header.vue,Us ...
- Vue之组件间传值
标签: Vue Vue之父子组件传值 父向子传递通过props 子向父传递通过$emit 演示地址 代码示例如下: <!DOCTYPE html> <html lang=" ...
- vue组件之间的传值
vue中组件之间的传值有好几种情况 1.父向子传值 父组件向子组件传值使用props,直接上实例 city.vue是父组件,list.vue是子组件city.vue里定义cities和hotCitie ...
- vue父子组件之间传值
vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种 ...
随机推荐
- java 通过反射获取和设置对象属性值
public static Object parseDate(Object object){ SimpleDateFormat sdf = new SimpleDateFormat("yyy ...
- 树莓派ssh报错：WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED解决
初次使用树莓派,在使用树莓派本机网卡时被DHCP服务器分配到192.168.0.103,连接正常.于是乎很开心的将无线网卡插入树莓派,急于摆脱网线的束缚. ifconfig一下获取无线网卡的MAC地址 ...
- python的数字
1.整数 与其它语言不同点两个乘号(**)代表 乘方运算 .前面代表底数,后面代表指数. 2.浮点数 它的小数位数可能是不确定的,需要注意 3.使用str()避免错误 在输出字符串时,可以避免类型错误 ...
- jQuery的下拉框应用
jQuery的下拉框应用 jQuery的下拉框左右选择应用 直接上代码 <!DOCTYPE html> <html> <head> <meta charset ...
- php支付走过的坑（支付宝篇 注册 秘钥 环境等等配置）
支付这东西,说容易也容易,说难也难 代码这玩意还比较好说 但是 如果没有demo 直接去看官方文档 十有八九一脸懵逼 今天就整理一下 支付这块走过的坑 涉及 微信h5支付 支付宝h5支付 (api文档 ...
- DIV内数据删除操作
对于数据操作,前端提供静态方法,交给后台去操作 此处记录一下,待优化,不过精华都在里面了 静态页面: 鼠标移上显示: html代码 css代码 js代码
- java右移>> 无符号右移>>>
>>>是无符号右移,在高位补零 >>是带符号的右移,如果是正数则在高位补零,负数则补1 int a = -1; System.out.println(a>>1 ...
- 【起航计划 005】2015 起航计划 Android APIDemo的魔鬼步伐 04 App->Activity->Custom Dialog Dialog形式的Activity，Theme的使用，Shape的使用
App->Activity->Custom Dialog 例子使用Activity 来实现自定义对话框 类CustomDialogActivity本身无任何特别之处.关键的一点是其在And ...
- Web前端开发规范（二）
3.HTML代码规范 .html文件必须存放在项目工程约定的目录中. .html文件的命名:以模块 + 功能的结合方式来命名,比如:newsList.html. 文档类型声明:HTML4中使用< ...
- Mahara-16.10 (Ubuntu 16.04)
平台: Ubuntu 类型: 虚拟机镜像 软件包: mahara-16.10 commercial education elearning mahara open source 服务优惠价: 按服务商 ...